suchen

Heim  >  Artikel  >  Web-Frontend  >  Detailliertes Beispiel einer Bootstrap-Schaltflächengruppe

Detailliertes Beispiel einer Bootstrap-Schaltflächengruppe

零下一度
零下一度Original
2017-07-03 11:40:291480Durchsuche

Die vorherigen Wörter

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>

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>


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>


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>


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>


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>


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%;
}
Im obigen Code legt .btn-group-justified > die Tabellenzelle fest, aber die Tabellenzelle kann den Rand nicht festlegen, und der Wert -margin wird im Code festgelegt, um den Rand zu entfernen, was offensichtlich keine Wirkung zeigt . Daher sollte der Code zum Entfernen doppelter Ränder darin bestehen, Tabellenränder zusammenzuführen – border-collapse: collap

<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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispiel-Tutorial für das Dropdown-Menü der Bootstrap-SchaltflächeNächster Artikel：Beispiel-Tutorial für das Dropdown-Menü der Bootstrap-Schaltfläche

In Verbindung stehende Artikel

Mehr sehen