Composant du bouton d'apprentissage Bootstrap (1)

Cet article vous présentera le composant bouton dans Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "Tutoriel bootstrap"

Le groupe de boutons est également un composant indépendant, vous pouvez donc trouver la source correspondante fichier de code :

Less : boutons.less

Sass:_buttons.scss

Css:Bootstrap.css Ligne 3131~Ligne 3291

Groupe de boutons et Composants du menu déroulant De même, il doit s'appuyer sur le plug-in button.js pour fonctionner correctement.

Aspect structurel : Utilisez un conteneur avec un nom de classe btn-group et placez plusieurs boutons dans ce conteneur.

<div>
  <button>
     <span></span>
  </button>
   …
  <button>
     <span></span>
  </button>
</div>

CSS :

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
  z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
  outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
   margin-left: -1px;
}

En plus de l'élément , vous pouvez également utiliser d'autres éléments de balise, tels que la balise assurez-vous que : quelle que soit la balise utilisée, l'élément tag dans le conteneur .btn-group doit avoir le nom de classe .btn

Les quatre coins du groupe de boutons sont arrondis, à l'exception du premier et dernier boutons qui ont des bords À l'exception des coins arrondis, les autres boutons n'ont pas de coins arrondis.

Explication détaillée :

1. Par défaut : tous les boutons sont arrondis

2 À l'exception du premier bouton et du dernier bouton, les coins arrondis des autres boutons sont annulés<.>

3. Seuls le coin supérieur droit et le coin inférieur droit du dernier bouton sont arrondis

Code source :

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

Barre d'outils du groupe de boutons

Dans un éditeur de texte enrichi, pour organiser des groupes de boutons ensemble, comme copier, couper, coller un groupe, aligner à gauche, aligner au centre, aligner à droite et aligner les deux extrémités, vous devez utiliser l'outil de bouton de cadre d'amorçage . Bar btn-toolbar

<div>
  <div>
    …
  </div>
  <div>
    …
  </div>
  <div>
    …
  </div>
  <div>
    …
  </div>
</div>

Principe : laissez principalement plusieurs groupes d'éléments containers.btn-group flotter et maintenez une marge gauche de 5 px entre les groupes

.btn-toolbar {
  margin-left: -5px;
}
.btn-toolbar .btn-group,
.btn-toolbar .input-group {
  float: left;
}
.btn-toolbar > .btn,
.btn-toolbar > .btn-group,
.btn-toolbar > .input-group {
  margin-left: 5px;
}

Notez que Clear flottant

.

.btn-toolbar:before,
.btn-toolbar:after｛
　display: table;
content: " ";
｝
.btn-toolbar:after{
  clear: both;
}

sur btn-toolbar Exemple :

<div>
           <div>
               <button>
                   <span></span>
               </button>
               <button>
                   <span></span>
               </button>
               <button>
                   <span></span>
               </button>
               <button>
                   <span></span>
               </button>
           </div>
           <div>
               <button>
                   <span></span>
               </button>
               <button>
                   <span></span>
               </button>
           </div>
       </div>

Regroupement de boutons imbriqués

Souvent, nous plaçons le menu déroulant dans un groupe de boutons très ordinaire. Organisez-les ensemble pour obtenir un effet similaire à un menu de navigation :

Lors de son utilisation, il vous suffit de remplacer le nom de classe du conteneur déroulant utilisé pour créer le menu déroulant avec btn-group, et mettez-le au même niveau que les boutons ordinaires :

<div>
           <button>首页</button>
           <button>产品展示</button>
           <button>案例分析</button>
           <button>联系我们</button>
           <div>
               <button>
                   关于我们<span></span>
               </button>
               <ul>
                   <li><a>公司简介</a></li>
                   <li><a>企业文化</a></li>
                   <li><a>组织结构</a></li>
                   <li><a>客服服务</a></li>
               </ul>
           </div>
       </div>

.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child> .btn:last-child,
.btn-group > .btn-group:first-child> .dropdown-toggle {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn-group:last-child> .btn:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
  padding-right: 8px;
  padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
  padding-right: 12px;
  padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
  -webkit-box-shadow: none;
  box-shadow: none;
}

Regroupement vertical des boutons

Remplacez simplement le nom de la classe de regroupement horizontal .btn-group par .btn-group- Juste vertical.

<div>
            <button>首页</button>
            <button>产品展示</button>
            <button>案例分析</button>
            <button>联系我们</button>
            <div>
                <button>
                    关于我们<span></span>
                </button>
                <ul>
                    <li><a>公司简介</a></li>
                    <li><a>企业文化</a></li>
                    <li><a>组织结构</a></li>
                    <li><a>客服服务</a></li>
                </ul>
            </div>
        </div>

rrree

Les boutons divisés de manière égale sont également appelés boutons de groupe adaptatifs :

La largeur de l'ensemble du groupe de boutons est de 100 % du conteneur, et chaque bouton du groupe de boutons est divisé en parts égales La largeur de l'ensemble du conteneur. Par exemple, il y a cinq boutons dans un groupe de boutons, et chaque bouton fait 20 % de la largeur du conteneur ; il y a quatre boutons dans un groupe de boutons et chaque bouton fait 25 % ; de la largeur du conteneur ;

Méthode d'implémentation : Ajoutez simplement un nom de classe .btn-group-justified

.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}
.btn-group-vertical > .btn-group > .btn {
  float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 4px;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

rrree au bouton group.btn-group pour simuler .btn-group-justified dans un tableau (affichage : tableau), et placez le Le modèle de bouton est simulé comme une cellule de tableau (affichage : table-cell).

Remarque : lorsque vous créez des groupes de boutons égaux, essayez d'utiliser la balise pour créer des boutons, car lorsque vous utilisez l'élément de balise bouton, l'utilisation de display: table n'est pas conviviale dans certains navigateurs <.>Pour plus de connaissances liées à la programmation, veuillez visiter :

Introduction à la programmation

 ! !

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!