Maison > Article > interface Web > Introduction détaillée au groupe de boutons Bootstrap
Introduction détaillée au groupe de boutons Bootstrap
- 零下一度original
- 2017-07-17 14:28:351758parcourir
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. Cet article présentera en détail comment utiliser le groupe de boutons Bootstrap
Le groupe de boutons, comme le composant de menu déroulant, doit s'appuyer sur le plug-in bouton.js. pour fonctionner correctement. Cependant, nous pouvons également appeler directement uniquement le fichier bootstrap.js. Parce que ce fichier a intégré la fonction de plug-in bouton.js
De même, comme les effets d'interaction des composants de Bootstrap reposent tous sur des plug-ins écrits par la bibliothèque jQuery, jquery.js doit être chargé avant d'utiliser bootstrap.js uniquement alors l'effet sera produit
<!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>
Utilisation de base
La structure du groupe de boutons est très simple. Utilisez un conteneur appelé "btn-group" et placez plusieurs boutons dans ce conteneur
Afin de transmettre le regroupement correct de boutons aux utilisateurs de lecteurs d'écran, vous devez fournir un attribut role approprié. Pour les groupes de boutons, cela devrait être role="group", pour les barres d'outils, cela devrait être role="toolbar"
De plus, les groupes de boutons et les barres d'outils doivent recevoir une étiquette explicite, malgré la définition des propriétés role correctes, mais la plupart. les technologies d’assistance ne les liront pas correctement. Vous pouvez utiliser aria-label ou aria-labelledby
En plus de l'élément <button>, vous pouvez également utiliser d'autres éléments d'étiquette, tels que la balise La seule chose à vérifier est la suivante : quelle que soit la balise utilisée, l'élément tag dans le conteneur ".btn-group" doit avoir le nom de classe ".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>
Barre d'outils de boutons
Dans l'éditeur de texte enrichi, regroupez les groupes de boutons, par exemple copier, couper et coller un groupe aligné à gauche, aligner au milieu ; , des groupes justes et justifiés. La barre d'outils des boutons du framework Bootstrap fournit également une telle méthode de production. Il vous suffit de placer le groupe de boutons "btn-group" dans un grand conteneur "btn-toolbar" par groupe
<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%;
} Dans le code ci-dessus, .btn-group-justified > .btn définit table-cell, mais table-cell ne peut pas définir la marge, et la valeur -margin est définie dans le code pour supprimer la bordure, ce qui n'a évidemment pas d'effet. . Par conséquent, le code pour supprimer les bordures en double devrait être de fusionner les bordures du tableau - border-collapse : collapse 为了将 <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>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!