찾다

 >  Q&A  >  본문

부트스트랩 버튼이 활성화된 경우 각 버튼에 그림자/테두리를 추가하는 CSS

<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>&nbsp;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>&nbsp;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>&nbsp;buffer3</label> </div>
<p>미리 감사드립니다! </p>
P粉256487077P粉256487077493일 전513

모든 응답(1)나는 대답할 것이다

  • P粉769413355

    P粉7694133552023-08-18 09:12:24

    이 CSS를 사용하면 선택한 라디오 버튼 입력의 다음 인접 라벨이 선택됩니다.

    으아악

    회신하다
    0
  • 취소회신하다