Maison > interface Web > js tutoriel > Boutons Bootstrap que vous devez apprendre tous les jours_compétences Javascript

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

WBOY
Libérer: 2016-05-16 15:29:44
original
1268 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


这个三角形完全是通过CSS代码来实现的:

/源码请查看bootstrap.css文件第2994行~第3003行/

.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;
}
Copier après la connexion

另外在按钮中的三角形“caret”做了一定的样式处理:

/源码查看bootstrap.css文件第3224行~第3233行/

.btn .caret {
 margin-left: 0;
}
.btn-lg .caret {
 border-width: 5px 5px 0;
 border-bottom-width: 0;
}
.dropup .btn-lg .caret {
 border-width: 0 5px 5px;
}
Copier après la connexion

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

/源码请查看bootstrap.css文件第3109行~第3114行/

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
 content: "";
 border-top: 0;
 border-bottom: 4px solid;
}
Copier après la connexion

上面代码中可以看出,向上三角与向下三角的区别:其实就是改变了一个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>
Copier après la connexion

运行效果如下:

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Recommandations populaires
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal