부트스트랩 버튼이 활성화된 경우 각 버튼에 그림자/테두리를 추가하는 CSS
P粉256487077
2023-08-17 23:54:27
<p>저는 프론트엔드를 만들기 위해 React 프레임워크를 사용하고 디자인을 위해 Bootstrap 5.3을 사용하고 있습니다. </p>
<p>제가 이해한 바에 따르면 Bootstrap은 이제 그림자 효과를 표준으로 제거했습니다. 따라서 버튼이 활성화되면 Bootstrap v5.0 설명서와 같이 버튼에 그림자/테두리가 표시되지 않습니다. </p>
<p>https://getbootstrap.com/docs/5.0/comComponents/buttons/</p>
<p>안타깝게도 코드에서 개별 버튼을 직접 사용자 정의하는 방법을 모르겠습니다. 버튼에 스타일 태그를 추가하거나 그룹화된 버튼에 라벨 태그를 추가하여 이 그림자 효과를 활성화할 수 있습니까? </p>
<pre class="brush:php;toolbar:false;">style={{*여기에 CSS 마법이 있습니다*}}</pre>
<p>여기 v5.0에서 알고 있는 그림자 효과를 사용하여 세 개의 버튼을 사용자 정의하려는 몇 가지 샘플 코드가 있습니다. </p>
<pre class="brush:php;toolbar:false;"><div className="row">
<h4>버퍼 선택</h4>
</div>
<div className="행">
<div className="col-sm-4 p-3 d-flex justify-content-center">
<input type="radio" className="btn-check" name="chooseBuffer" id="buffer1" autoComplete="off" onClick={() =>measurementConfig.buffer = 1 } />
<label className="btn btn-lg btn-warning" htmlFor="buffer1"><span className="bi-database-add"></span> buffer1</label>
</div>
<div className="col-sm-4 p-3 d-flex justify-content-center">
<input type="radio" className="btn-check" name="chooseBuffer" id="buffer2" autoComplete="off" onClick={() =>measurementConfig.buffer = 2 } />
<label className="btn btn-lg btn-success" htmlFor="buffer2"><span className="bi-database-add"></span> buffer2</label>
</div>
<div className="col-sm-4 p-3 d-flex justify-content-center">
<input type="radio" className="btn-check" name="chooseBuffer" id="buffer3" autoComplete="off" onClick={() =>measurementConfig.buffer = 3 } />
<label className="btn btn-lg btn-info" htmlFor="buffer3"><span className="bi-database-add"></span> buffer3</label>
</div>
<p>미리 감사드립니다! </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이 CSS를 사용하면 선택한 라디오 버튼 입력의 다음 인접 라벨이 선택됩니다.
으아악