Boutons Bootstrap que vous devez apprendre tous les jours_compétences Javascript-js tutoriel-php.cn

Boutons Bootstrap que vous devez apprendre tous les jours_compétences Javascript

WBOY

Libérer： 2016-05-16 15:29:44

original

1263 Les gens l'ont consulté

1. Bouton (groupe de boutons)

L'utilisation d'un seul bouton dans une page Web ne répond parfois pas à nos besoins professionnels. Nous voyons souvent plusieurs boutons utilisés ensemble, comme un ensemble de petits boutons d'icônes dans un éditeur de texte enrichi. Ainsi, dans cette section, nous vous présentons principalement les composants du groupe de boutons fournis par le framework Bootstrap.

Requête de code source :

Le groupe de boutons est également un composant indépendant, vous pouvez donc retrouver le fichier de code source correspondant :

☑ Version LESS : Le fichier source correspondant est Buttons.less

☑ Version Sass : Le fichier source correspondant est _buttons.scss

☑ Version CSS : Correspond aux lignes 3131 ~ 3291 du fichier bootstrap.css

Utilisation :

Les groupes de boutons, comme les composants de menu déroulant, doivent s'appuyer sur le plug-in button.js pour fonctionner correctement. Cependant, nous pouvons également appeler directement uniquement le fichier bootstrap.js. Parce que ce fichier a intégré la fonction du plug-in bouton.js.

Quant à la structure, elle est très simple. Utilisez un conteneur nommé "btn-group" et placez plusieurs boutons dans ce conteneur. Comme indiqué ci-dessous :

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

Copier après la connexion

L'effet de l'opération est le suivant :

En plus de l'élément

.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按钮组工具栏的全部内容，希望对大家的学习有所帮助。