Bootstrap-Schaltflächen müssen Sie jeden Tag erlernen_Javascript-Kenntnisse-js-Tutorial-php.cn

Bootstrap-Schaltflächen müssen Sie jeden Tag erlernen_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:29:44

Original

1263 Leute haben es durchsucht

1. Schaltfläche (Schaltflächengruppe)

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 Abschnitt stellen wir Ihnen daher hauptsächlich die vom Bootstrap-Framework bereitgestellten Schaltflächengruppenkomponenten vor.

Quellcode-Abfrage:

Die Schaltflächengruppe ist ebenfalls eine eigenständige Komponente, daher finden Sie die entsprechende Quellcodedatei:

☑ LESS-Version: Die entsprechende Quelldatei ist Buttons.less

☑ Sass-Version: Die entsprechende Quelldatei ist _buttons.scss

☑ CSS-Version: Entspricht den Zeilen 3131 ~ 3291 der Datei bootstrap.css

Verwendung:

Schaltflächengruppen müssen wie Dropdown-Menükomponenten auf das Button.js-Plug-in angewiesen sein, um ordnungsgemäß zu funktionieren. Wir können jedoch auch nur die Datei bootstrap.js direkt aufrufen. Weil diese Datei die Plug-in-Funktion button.js integriert hat.

Die Struktur ist sehr einfach. Verwenden Sie einen Container mit dem Namen „btn-group“ und fügen Sie mehrere Schaltflächen in diesen Container ein. Wie unten gezeigt:

<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

Der Betriebseffekt ist wie folgt:

Zusätzlich zum

.caret { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }

有的时候我们的下拉菜单会向上弹起，这个时候我们的三角方向需要朝上显示，实现方法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名）。

上面代码中可以看出，向上三角与向下三角的区别：其实就是改变了一个border-bottom的值。

<div class="btn-group dropup"> <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>

以上就是关于Bootstrap按钮组工具栏的全部内容，希望对大家的学习有所帮助。