Bootstrap Boutons

Objectifs

Les boutons sont largement utilisés dans les sites web ou les applications. Dans ce tutoriel, nous allons voir comment utiliser les boutons Bootstrap 3 et comment personnaliser les boutons par défaut à l'aide d'exemples et d'explications d'exemples.

Utilisation des boutons par défaut

L'exemple suivant montre comment créer rapidement des boutons avec Bootstrap 3.

Le code ci-dessus produit le résultat suivant. Vous pouvezCliquez ici pour voir l'exemple en ligne。

CSS

Nous allons maintenant explorer les règles CSS utilisées pour créer ces boutons. La classe principale utilisée pour créer des boutons estbtn, comme indiqué ci-dessous.

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
       -o-user-select: none;
          user-select: none;
}

En raison du code CSS ci-dessus, les boutons (avec la classe btn) sont rendus en inline-block, ce qui permet aux boutons d'être rendus en ligne avec des éléments adjacents qui partagent une ligne de base commune, mais vous pouvez leur ajouter des propriétés width et height. Son padding est de 6 pixels en haut et en bas, et de 12 pixels à gauche et à droite. La marge inférieure est définie sur 0.

La taille de police est définie sur 14 pixels, et la graisse de police est définie sur normal. La hauteur de ligne d'un bouton avec la classe btn est de 1.428571429, ce qui est légèrement supérieur à la hauteur par défaut de 1. Le texte est aligné au centre.

La propriété white-space est définie sur nowrap, donc les retours à la ligne, les espaces et les tabulations seront réduits. Les éléments associés centrés verticalement seront positionnés au milieu de la hauteur. Lorsque vous survolez l'élément associé avec la souris, le curseur apparaîtra sous la forme d'un pointeur. Aucune image d'arrière-plan ne sera affichée ici.

Une bordure solide transparente de 1 pixel d'épaisseur sera rendue ici. Parce queborder-radius: 4px;, les coins des boutons concernés seront arrondis. En augmentant ou diminuant la valeur de 4px, vous pouvez rendre l'arrondi des coins plus grand ou plus petit. Puisqueuser-select: none, le texte des boutons concernés et des éléments enfants sera non sélectionnable. Pour obtenir une cohérence entre navigateurs, la même propriété est appliquée avec plusieurs préfixes vendeurs.

Chaque bouton montré dans l'exemple ci-dessus, saufbtn. En outre, il existe d'autres classes CSS, telles que btn-default, btn-primary, etc. Ces classes sont utilisées pour définir lescolor、background-coloretborderAttributs. Ce sont des règles CSS pour les boutons réguliers et pour les boutons avec états de lien (c'est-à-dire hover, active, focus, etc.).

btn-primaryLe code de la classe est le suivant

.btn-primary {
  color: #FFFFFF;
  background-color: #428BCA;
  border-color: #357EBD;
}

Boutons de tailles différentes

Il y a trois tailles qui peuvent être définies. Pour définir chaque taille, vous devez ajouter une classe supplémentaire.

btn-lg pour définir un grand bouton.

<button type="button" class="btn btn-primary btn-lg">Large button</button>

Le code CSS pour la classe btn-lg est le suivant

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

Utilisationbtn-smetbtn-xsConfigurer des boutons de différentes tailles.

<button type="button" class="btn btn-primary btn-sm">Large button</button>
<button type="button" class="btn btn-primary btn-xs">Large button</button>

Le code CSS pour les classes btn-sm et btn-xs est le suivant.

.btn-sm,
.btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

.btn-xs {
  padding: 1px 5px;
}

Le code suivant montre différents types de boutons avec différentes tailles. Vous pouvezcliquer ici pour voir la démo en ligne.. Ci-dessous, une capture d'écran de l'effet et le code.

Boutons au niveau bloc

Pour utiliser toute la largeur du conteneur du bouton, Bootstrap 3 propose une option de bouton au niveau bloc. Vous devez ajouter la classebtn-blockà la classe mentionnée ci-dessus pour créer des boutons au niveau bloc.

<button type="button" class="btn btn-primary btn-lg btn-block">Large button</button>
<button type="button" class="btn btn-success btn-lg btn-block">Large button</button>  

La définition CSS pour créer des boutons au niveau bloc est la suivante

.btn-block {
  display: block;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

.btn-block + .btn-block {
  margin-top: 5px;
}

Ce qui suit présente des captures d'écran et du code pour les boutons de niveau bloc. Vous pouvezcliquer ici pour voir l'exemple en ligne。

Boutons actifs

Vous pouvez utiliseractivecomme classe CSS pour donner aux boutons ou aux liens une apparence différente afin de montrer qu'il est actif. Voici unedémo en direct, capture d'écran et code.

En utilisant les outils de développement Chrome, nous constaterons que lorsqu'un bouton est ajouté avec la classeactive, les règles CSS prennent effet.

Bouton actif par défaut

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
color: #333;
background-color: #EBEBEB;
border-color: #ADADAD;
}

Bouton actif primaire

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
color: #fff;
background-color: #3276B1;
border-color: #285E8E;
}

Bouton actif succès

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
color: #fff;
background-color: #4877A6;
border-color: #4877A6;
}

Bouton actif info

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open .dropdown-toggle.btn-info {
color: #fff;
background-color: #39B3D7;
border-color: #269ABC;
}

Bouton actif avertissement

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open .dropdown-toggle.btn-warning {
color: #fff;
background-color: #ED9C28;
border-color: #D58512;
}

Bouton actif danger

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open .dropdown-toggle.btn-danger {
color: #fff;
background-color: #D2322D;
border-color: #AC2925;
}

Bouton actif lien

.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
border-color: transparent;
}

Donc, vous pouvez voir que ceux-ci sont obtenus en modifiant les propriétés color, backgound-color et border-color.

Boutons désactivés

Vous pouvez utiliserdisabledclasse CSS pour ajouter différentes apparences aux boutons ou aux liens afin de montrer qu'ils sont désactivés. Voici unedémo en direct, une capture d'écran et le code.

Pour rendre le bouton un peu flou, utilisez la règle CSS suivante (trouvée via Chrome Developer Tools)

.btn[disabled], fieldset[disabled] .btn {
pointer-events: none;
cursor: not-allowed;
opacity: .65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
}

Éléments d'ancrage désactivés

Lorsque des éléments d'ancrage avec les classes btn et d'autres classes associées sont rendus comme désactivés, cela diffère légèrement de l'habitude. Tout d'abord, le lien de l'élément d'ancrage existe toujours ; seuls l'apparence et le ressenti ont changé. De plus, vous ne pouvez pas les utiliser dans la barre de navigation.

Cliquez ici pour voir la démo en ligne.Le code est le suivant :

Veuillez noter,role="button"il est utilisé pour faciliter l'utilisation.

Balises de bouton

Vous pouvez utiliser les classes de bouton sur les éléments button, a et input pour les utiliser comme boutons. Toutefois, il est recommandé d'utiliser généralement l'élément button, sinon cela peut entraîner des incohérences entre navigateurs.

L'exemple suivant montre comment utiliser les balises button

Cliquez ici pour voir la démo en ligne.

Boutons personnalisés

Maintenant, nous allons commencer à personnaliser avec le bouton par défaut pour lui donner un aspect et une sensation complètement différents.

Nous allons commencer avec le code de bouton suivant.

<button type="button" class="btn btn-default">Default</button>

Maintenant, nous allons créer une classe CSSbtn-w3r, et l'utiliser pour remplacer btn-default. Donc, nous allons écrire le code suivant pour remplacer le code ci-dessus.

<button type="button" class="btn btn-w3r">Default</button>

Tout d'abord, nous allons changer la couleur d'arrière-plan en ajoutant le CSS suivant.

.btn-w3r {
    background: #CB60B3; /* Old browsers */
    background: -moz-linear-gradient(top,  #CB60B3 0%, #AD1283 50%, #DE47AC 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CB60B3), color-stop(50%,#AD1283), color-stop(100%,#DE47AC)); /   *   Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #CB60B3 0%,#AD1283 50%,#DE47AC 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #CB60B3 0%,#AD1283 50%,#DE47AC 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #CB60B3 0%,#AD1283 50%,#DE47AC 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #CB60B3 0%,#AD1283 50%,#DE47AC 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CB60B3', endColorstr='#DE47AC',GradientType=0 ); /* IE6-9 */
    }

Maintenant, le bouton ressemble à ceci.

Pour changer la couleur de la police, nous allons, après le code CSS existant de la classebtn-w3r, ajouter le CSS suivant.

color:#fff;

Maintenant, pour que la forme du bouton ressemble à un cercle, nous allons, avant le code CSS existant de la classebtn-w3r, ajouter le CSS suivant.

width: 200px;
    height: 200px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;

Pour ajouter un effet de survol, nous allons ajouter le code CSS suivant.

.btn-w3r:hover {
    background: #333; 
    color:#E75616;
    }

Ci-dessous se trouve l'effet de survol du bouton après l'ajout du code CSS ci-dessus.

Vous pouvezcliquer ici pour voir la démo en ligne du bouton personnalisé que nous avons créé.。