Exemple détaillé de groupe de boutons Bootstrap-tutoriel HTML-php.cn

Les mots précédents

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 bouton dans un éditeur de texte enrichi. petits boutons d'icône et plus encore. 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 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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Taille des boutons

Dans le billet de blog présentant les boutons de formulaire, nous savons que les boutons sont créés via btn-lg, btn-sm et btn-xs Un nom de classe pour ajuster les valeurs des propriétés padding, font-size, line-height et border-radius afin de modifier la taille du bouton. Ensuite, nous pouvons également utiliser une méthode similaire pour déterminer la taille du groupe de boutons :

☑ .btn-group-lg : Grand groupe de boutons

☑ .btn-group-sm : Petit bouton group

☑ .btn-group-xs : groupe de boutons ultra-petits

Ajoutez simplement le nom de classe correspondant au nom de classe ".btn-group" pour obtenir des groupes de boutons de différentes tailles

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

Copier après la connexion

Regroupement imbriqué

Plusieurs fois, nous combinons souvent des menus déroulants avec un bouton ordinaire groupes Disposés ensemble pour obtenir un effet similaire à un menu de navigation. Lors de son utilisation, il vous suffit de remplacer le conteneur "dropdown" utilisé pour créer le menu déroulant par "btn-group" et de le placer au même niveau que les boutons ordinaires

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

Copier après la connexion

Disposition verticale

Par défaut, les groupes de boutons sont affichés horizontalement. Mais dans l’application réelle, vous rencontrerez toujours l’effet d’affichage vertical. Ce style est également fourni dans le framework Bootstrap. Changez simplement le nom de la classe "btn-group" du regroupement horizontal en "btn-group-vertical"

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

Copier après la connexion

Bouton portion égale

L'effet du bouton portion égale est particulièrement pratique sur le terminal mobile. La largeur totale du groupe de boutons correspond à 100 % du conteneur et chaque bouton du groupe de boutons divise la largeur entière du conteneur de manière égale. Par exemple, s'il y a cinq boutons dans le groupe de boutons, alors chaque bouton a une largeur de 20 %, s'il y a quatre boutons, alors chaque bouton a une largeur de 25 %, et ainsi de suite

Les boutons également divisés sont également courants C'est ce qu'on appelle un bouton de groupe adaptatif, et sa méthode d'implémentation est également très simple. Il vous suffit d'ajouter un nom de classe "btn-group-justified" au groupe de boutons "btn-group"

Le principe d'implémentation. est très simple. Simulez "btn-group-justified" sous forme de tableau (display:table) et simulez les boutons à l'intérieur sous forme de cellules de tableau (display:table-cell)

[Remarque] Lors de la création de groupes de boutons égaux. , essayez d'utiliser l'élément de balise pour créer des boutons, car lorsque vous utilisez l'élément de balise <button>, l'utilisation de display:table n'est pas conviviale dans certains navigateurs

.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%;
}

Copier après la connexion

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>

Copier après la connexion

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!