CSS zum Hinzufügen von Schatten/Rahmen zu jeder Schaltfläche, wenn Bootstrap-Schaltflächen aktiv sind
P粉256487077
2023-08-17 23:54:27
<p>Ich verwende das React-Framework zum Erstellen des Frontends und verwende Bootstrap 5.3 für das Design. </p>
<p>Nach meinem Verständnis hat Bootstrap den Schatteneffekt mittlerweile standardmäßig eliminiert. Wenn die Schaltfläche also aktiv ist, zeigt die Schaltfläche keinen Schatten/Rahmen an, wie in der Bootstrap v5.0-Dokumentation. </p>
<p>https://getbootstrap.com/docs/5.0/components/buttons/</p>
<p>Leider weiß ich nicht, wie ich einzelne Schaltflächen direkt im Code anpassen kann. Ist es möglich, diesen Schatteneffekt zu aktivieren, indem man der Schaltfläche ein Style-Tag oder den gruppierten Schaltflächen ein Label-Tag hinzufügt? </p>
<pre class="brush:php;toolbar:false;">style={{*Hier ist etwas CSS-Magie*}}</pre>
<p>Hier ist ein Beispielcode. Ich möchte drei Schaltflächen mit diesem Schlagschatteneffekt anpassen, den wir aus Version 5.0 kennen. </p>
<pre class="brush:php;toolbar:false;"><div className="row">
<h4>Puffer auswählen</h4>
</div>
<div className="row">
<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>
</div></pre>
<p>Vielen Dank im Voraus! </p>
使用这个css,它将会选择被选中的单选框输入的下一个相邻的标签。