Die Verwendung einer einzelnen Schaltfläche auf einer Webseite entspricht manchmal nicht unseren Geschäftsanforderungen. Wir sehen oft, dass mehrere Schaltflächen zusammen verwendet werden, beispielsweise eine Reihe kleiner Symbolschaltflächen in einem Rich-Text-Editor. In diesem Artikel wird detailliert beschrieben, wie die Bootstrap-Schaltflächengruppe verwendet wird
Die Schaltflächengruppe muss sich wie die Dropdown-Menükomponente auf das Plug-in „button.js“ verlassen. ordnungsgemäß funktionieren. Wir können jedoch auch nur die Datei bootstrap.js direkt aufrufen. Da diese Datei die Plug-in-Funktion button.js integriert hat
Da die Komponenteninteraktionseffekte von Bootstrap alle auf Plug-ins basieren, die von der jQuery-Bibliothek geschrieben wurden, muss jquery.js geladen werden, bevor nur bootstrap.js verwendet wird dann wird der Effekt erzeugt
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css?1.1.11" rel="stylesheet"></head><body><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js?1.1.11"></script></body></html>
Nach dem Login kopieren
Grundlegende Verwendung
Die Tastengruppenstruktur ist sehr einfach. Verwenden Sie einen Container namens „btn-group“ und fügen Sie mehrere Schaltflächen in diesen Container ein.
Um Benutzern von Bildschirmleseprogrammen die korrekte Gruppierung von Schaltflächen zu vermitteln, müssen Sie ein entsprechendes role-Attribut bereitstellen. Für Schaltflächengruppen sollte es role="group" sein, für Symbolleisten sollte es role="toolbar"
sein. Darüber hinaus sollten Schaltflächengruppen und Symbolleisten eine explizite Bezeichnung erhalten, obwohl die richtigen role-Eigenschaften festgelegt sind, aber die meisten unterstützende Technologien werden sie nicht richtig lesen. Sie können aria-label oder aria-labelledby
verwenden. Zusätzlich zum <button> können Sie auch andere Label-Elemente verwenden. Das Einzige, was sichergestellt werden muss, ist: Egal welches Tag verwendet wird, das Tag-Element im Container „.btn-group“ muss den Klassennamen „.btn“
<div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-backward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-backward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-forward "></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-fast-forward"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward"></span></button></div>
Nach dem Login kopieren
Schaltflächensymbolleiste
Gruppieren Sie Schaltflächengruppen im Rich-Text-Editor, z. B. Kopieren, Ausschneiden und Einfügen einer Gruppe, linksbündig, mittig ausrichten , rechte und gerechtfertigte Gruppen. Die Schaltflächensymbolleiste des Bootstrap-Frameworks bietet ebenfalls eine solche Produktionsmethode. Sie müssen lediglich die Schaltflächengruppe „btn-group“ in einem großen Container „btn-toolbar“ nach Gruppe platzieren
<div class="btn-toolbar">
<div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
</div>
<div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-left"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-indent-right"></span></button>
</div>
<div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-font"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-bold"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-italic"></span></button>
</div>
<div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-height"></span></button><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-text-width"></span></button>
</div></div>
Nach dem Login kopieren
Schaltflächengröße
Im Blogbeitrag zur Einführung von Formularschaltflächen wissen wir, dass Schaltflächen über btn-lg, btn-sm und btn-xs erstellt werden Ein Klassenname zum Anpassen der Eigenschaftswerte „padding“, „font-size“, „line-height“ und „border-radius“ zum Ändern der Schaltflächengröße. Dann können wir auch eine ähnliche Methode verwenden, um die Größe der Schaltflächengruppe zu bestimmen:
☑ .btn-group-lg: Große Schaltflächengruppe
☑ .btn-group-sm: Kleine Schaltfläche Gruppe
☑ .btn-group-xs: Ultrakleine Schaltflächengruppe
Hängen Sie einfach den entsprechenden Klassennamen an den Klassennamen „.btn-group“ an, um Schaltflächengruppen unterschiedlicher Größe zu erhalten
<div class="btn-group btn-group-lg">
<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><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><div class="btn-group btn-group-sm">
<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><div class="btn-group btn-group-xs">
<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
Verschachtelte Gruppierung
Oft kombinieren wir Dropdown-Menüs mit gewöhnlichen Schaltflächen Gruppen werden zusammen angeordnet, um einen ähnlichen Effekt wie ein Navigationsmenü zu erzielen. Wenn Sie es verwenden, müssen Sie lediglich den „Dropdown“-Container, der zum Erstellen des Dropdown-Menüs verwendet wird, durch „btn-group“ ersetzen und ihn auf der gleichen Ebene wie die normalen Schaltflächen platzieren
<div class="btn-group">
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们 <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="##">公司简介</a></li><li><a href="##">企业文化</a></li><li><a href="##">组织结构</a></li><li><a href="##">客服服务</a></li></ul>
</div></div>
Nach dem Login kopieren
Vertikale Anordnung
Standardmäßig werden Schaltflächengruppen horizontal angezeigt. In der tatsächlichen Anwendung werden Sie jedoch immer auf den Effekt einer vertikalen Anzeige stoßen. Dieser Stil wird auch im Bootstrap-Framework bereitgestellt. Ändern Sie einfach den Klassennamen „btn-group“ der horizontalen Gruppierung in „btn-group-vertikal“
<div class="btn-group-vertical">
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button><ul class="dropdown-menu"><li><a href="##">公司简介</a></li><li><a href="##">企业文化</a></li><li><a href="##">组织结构</a></li><li><a href="##">客服服务</a></li></ul>
</div></div>
Nach dem Login kopieren
Gleichportion-Taste
Besonders praktisch ist die Wirkung der Gleichportion-Taste auf dem mobilen Endgerät. Die gesamte Breite der Schaltflächengruppe beträgt 100 % des Containers, und jede Schaltfläche in der Schaltflächengruppe teilt die gesamte Containerbreite gleichmäßig auf. Wenn beispielsweise fünf Schaltflächen in der Schaltflächengruppe vorhanden sind, ist jede Schaltfläche 20 % breit, wenn vier Schaltflächen vorhanden sind, ist jede Schaltfläche 25 % breit und so weiter.
Gleichmäßig geteilte Schaltflächen sind ebenfalls üblich Es wird als adaptive Gruppenschaltfläche bezeichnet und die Implementierungsmethode ist ebenfalls sehr einfach. Sie müssen lediglich einen „btn-group-justified“-Klassennamen an die Schaltflächengruppe „btn-group“ anhängen
Das Implementierungsprinzip ist sehr einfach. Simulieren Sie „btn-group-justified“ als Tabelle (display:table) und simulieren Sie die Schaltflächen darin als Tabellenzellen (display:table-cell)
[Hinweis] Beim Erstellen gleicher Schaltflächengruppen Versuchen Sie, das Tag-Element
zu verwenden, da die Verwendung des Tag-Elements <button> in einigen Browsern nicht benutzerfreundlich ist
.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%;
}Nach dem Login kopieren
<div class="btn-group btn-group-justified"><a class="btn btn-default" href="#">首页</a><a class="btn btn-default" href="#">产品展示</a><a class="btn btn-default" href="#">案例分析</a><a class="btn btn-default" href="#">联系我们</a></div>
Nach dem Login kopieren
为了将 <button> 元素用于两端对齐的按钮组中，必须将每个按钮包裹进一个按钮组中。因为大部分的浏览器不能将CSS 应用到对齐的 <button> 元素上，但是，可以用按钮式下拉菜单来解决这个问题
<div class="btn-group btn-group-justified"><div class="btn-group" role="group"><button class="btn btn-default" >首页</button></div> <div class="btn-group" role="group"><button class="btn btn-default" >产品展示</button></div> <div class="btn-group" role="group"><button class="btn btn-default" >案例分析</button></div> <div class="btn-group" role="group"><button class="btn btn-default" >联系我们</button></div> </div>
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Bootstrap-Schaltflächengruppe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
