Heim > Artikel > Web-Frontend > Detailliertes Beispiel einer Bootstrap-Schaltflächengruppe
Die Verwendung einer einzelnen Schaltfläche auf einer Webseite entspricht manchmal nicht unseren Geschäftsanforderungen. Wir sehen häufig, dass mehrere Schaltflächen zusammen verwendet werden, beispielsweise eine Schaltfläche in einem Rich-Text-Editor kleine Symbolschaltflächen und mehr. In diesem Artikel wird detailliert beschrieben, wie die Bootstrap-Schaltflächengruppe verwendet wird.
Die Schaltflächengruppe muss sich wie die Dropdown-Menükomponente auf die Schaltfläche verlassen. js-Plug-in ordnungsgemäß ausführen. 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>
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>
<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>
<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>
<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>
<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>
.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%; }
<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>
为了将 <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>
Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel einer Bootstrap-Schaltflächengruppe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!