Was sind die Bootstrap-Buttons?-Front-End-Fragen und Antworten-php.cn

Was sind die Bootstrap-Buttons?

青灯夜游

Freigeben： 2021-12-28 15:52:11

Original

5836 Leute haben es durchsucht

Zu den Schaltflächen im Bootstrap-Stil gehören: 1. abgerundete graue Schaltfläche „.btn-lg“; 3. kleine Schaltfläche „.btn-sm“; Schaltfläche; 5. „.btn-block“-Schaltfläche auf Blockebene; 6. „.disabled“-Schaltfläche im deaktivierten Stil usw.

Was sind die Bootstrap-Buttons? Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootsrap-Version 3.3.7, DELL G3-Computer

Zusammenfassung des Stils der Bootstrap-Schaltfläche

.active.disabledGrundlegende SchaltflächengruppeSchaltflächengröße

<div class="btn-group btn-group-lg">
	<button type="button" class="btn btn-default">Button 1</button>
	<button type="button" class="btn btn-default">Button 2</button>
	<button type="button" class="btn btn-default">Button 3</button>
</div>
<div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-default">Button 4</button>
	<button type="button" class="btn btn-default">Button 5</button>
	<button type="button" class="btn btn-default">Button 6</button>
</div>
<div class="btn-group btn-group-xs">
	<button type="button" class="btn btn-default">Button 7</button>
	<button type="button" class="btn btn-default">Button 8</button>
	<button type="button" class="btn btn-default">Button 9</button>
</div>

Nach dem Login kopieren

Weitere Informationen zu Bootstrap finden Sie unter: Bootstrap-Basis-Tutorial! !

Klassenstil	Beschreibung
.btn	Abgerundete graue Schaltfläche. Um die Schaltfläche weniger scharf zu machen, sollten alle unsere Schaltflächen diesen Stil verwenden, um eine zu erhalten Erstellen Sie eine runde Ecke und überlagern Sie sie dann mit anderen Features.
.btn-default	Standard-/Standard-Taste, die weiße Taste ist grau, wenn sie gedrückt wird.
.btn-primary	Ursprünglicher Schaltflächenstil (nicht betätigt), dies entspricht aktiv, also dem Stil einer Schaltfläche, die nicht betätigt wurde, und aktiv ist der entsprechende Stil, der angezeigt wird, wenn auf die Schaltfläche geklickt wird.
.btn-success	stellt eine erfolgreiche Aktion dar.
.btn-info	Dieser Stil kann für Schaltflächen verwendet werden, die Informationen anzeigen möchten.
.btn-warning	stellt Schaltflächen dar, die erfordert sorgfältige Bedienung
.btn-danger	stellt eine gefährliche Aktionsschaltflächenaktion dar
.btn-link	lässt die Schaltfläche wie einen Link aussehen (behält weiterhin das Schaltflächenverhalten bei)
.btn- lg. Große Schaltfläche % von die Breite des übergeordneten Elements) Wenn auf die Schaltfläche
geklickt wird, sieht die Schaltfläche gedrückt aus (dunkler Hintergrund, dunkler Rand, Schatten), wenn sie aktiviert ist.
Deaktivieren Sie die Schaltfläche, die Farbe wird 50 % heller und der Farbverlauf geht verloren.
<div class="btn-group"> <button type="button" class="btn btn-default">按钮 1</button> <button type="button" class="btn btn-default">按钮 2</button> <button type="button" class="btn btn-default">按钮 3</button> </div> Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWas sind die Bootstrap-Buttons?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!