In diesem Artikel wird Ihnen die Schaltflächenkomponente in Bootstrap vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein. 🔜
Css: Bootstrap.css Zeile 3131 ~ Zeile 3291
Die Schaltflächengruppe ist dieselbe wie die Dropdown-Menükomponente und muss sich auf das Button.js-Plug-In verlassen, um ordnungsgemäß zu funktionieren.
Struktureller Aspekt: Verwenden Sie einen Container mit dem Klassennamen btn-group und platzieren Sie mehrere Schaltflächen in diesem Container. <div>
<button>
<span></span>
</button>
…
<button>
<span></span>
</button>
</div>
.btn-group,
.btn-group-vertical {
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
position: relative;
float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
margin-left: -1px;
}Zusätzlich zum
Die vier Ecken der Schaltflächengruppe sind abgerundet, mit Ausnahme der ersten und letzten Schaltflächen, die an den Seiten abgerundete Ecken haben keine abgerundeten Ecken haben. Detaillierte Erklärung: 1. Standard: Alle Schaltflächen haben abgerundete Ecken2. Mit Ausnahme der ersten Schaltfläche und der letzten Schaltfläche sind die abgerundeten Ecken der anderen Schaltflächen deaktiviert. 3 Ecke und untere rechte Ecke Für abgerundete Ecken Quellcode:.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0;
}
.btn-group > .btn:first-child {
margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}<div> <div> … </div> <div> … </div> <div> … </div> <div> … </div> </div>
.btn-toolbar {
margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
margin-left: 5px;
}.btn-toolbar:before,
.btn-toolbar:after｛
display: table;
content: " ";
｝
.btn-toolbar:after{
clear: both;
}<div> <div> <button> <span></span> </button> <button> <span></span> </button> <button> <span></span> </button> <button> <span></span> </button> </div> <div> <button> <span></span> </button> <button> <span></span> </button> </div> </div>
Verschachtelte Schaltflächengruppierung
Oft ordnen wir gemeinsame Schaltflächengruppen mit Dropdown-Menüs an, um so etwas wie die zu erreichen Auswirkung auf das Navigationsmenü:
Wenn Sie es verwenden, ändern Sie einfach den Klassennamen des Dropdown-Containers, der zuvor zum Erstellen des Dropdown-Menüs verwendet wurde, in „btn-group“ und platzieren Sie ihn auf derselben Ebene wie die normalen Schaltflächen:
<div> <button>首页</button> <button>产品展示</button> <button>案例分析</button> <button>联系我们</button> <div> <button> 关于我们<span></span> </button> <ul> <li><a>公司简介</a></li> <li><a>企业文化</a></li> <li><a>组织结构</a></li> <li><a>客服服务</a></li> </ul> </div> </div>
.btn-group > .btn-group {
float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-box-shadow: none;
box-shadow: none;
}Ersetzen Sie einfach den Namen der horizontalen Gruppierungsklasse .btn-group durch .btn-group-vertical. <div>
<button>首页</button>
<button>产品展示</button>
<button>案例分析</button>
<button>联系我们</button>
<div>
<button>
关于我们<span></span>
</button>
<ul>
<li><a>公司简介</a></li>
<li><a>企业文化</a></li>
<li><a>组织结构</a></li>
<li><a>客服服务</a></li>
</ul>
</div>
</div>
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
margin-top: -1px;
margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
Die Breite der gesamten Schaltflächengruppe beträgt 100 % des Containers, und jede Schaltfläche in der Schaltflächengruppe teilt die Breite des gesamten Containers gleichmäßig auf. Es gibt fünf Schaltflächen in einer Schaltflächengruppe, jede Schaltfläche hat 20 % der Breite des Containers. Es gibt vier Schaltflächen in einer Schaltflächengruppe, jede Schaltfläche hat 25 % der Breite des Containers. 
<div> <buttton>首页</buttton> <buttton>案例分析</buttton> <buttton>联系我们</buttton> <buttton>关于我们</buttton> </div>
.btn-group-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate;
}
.btn-group-justified > .btn,
.btn-group-justified > .btn-group {
display: table-cell;
float: none;
width: 1%;
}
.btn-group-justified > .btn-group .btn {
width: 100%;
}Hinweis: Versuchen Sie beim Erstellen gleicher Schaltflächengruppen, das Tag zu verwenden, da die Verwendung des Schaltflächen-Tag-Elements in einigen Browsern nicht benutzerfreundlich ist.
Mehr Programmierung für Verwandte Weitere Kenntnisse finden Sie unter:Einführung in die Programmierung! !
Das obige ist der detaillierte Inhalt vonBootstrap-Lernschaltflächenkomponente (1). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So lesen Sie Daten in einer Excel-Datei in Python
So kaufen Sie Fil-Münzen
Wozu dient Dezender?
Wörter verschwinden nach dem Tippen
Wo befindet sich das Audio-Interface auf dem Motherboard?
Tool zur Bewertung von Website-Domainnamen
Der Unterschied zwischen PD-Schnellladen und allgemeinem Schnellladen
Die Rolle von Linux-Terminalbefehlen
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
