Sélectionner une page


Bootstrap comprend un composant CSS pratique pour les boutons.

Dans ce tutoriel, je vais vous montrer comment l’utiliser Bootstrap 4 boutons pour créer et concevoir votre site Web plus facilement et plus rapidement.

Éléments HTML

Les classes de boutons sont conçues pour être utilisées avec le <button>, <a> ou <input> Éléments.


Classes clés

Touches de base et leurs couleurs

Bootstrap comprend neuf styles de boutons de base, chacun ayant son propre objectif sémantique.

Les boutons ont un texte blanc et un arrière-plan basé sur le BTN-.[colour] Classe utilisée en conjonction avec le btn Classer. Par exemple, btn-primary crée un bouton avec un arrière-plan principal, btn-success avec fond vert etc.

Si vous en utilisez un spécial btn-link Génial, le bouton ressemble à un Lien texte avec remplissage. J’utilise généralement ces boutons pour des actions secondaires comme « retour ».

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

Boutons de contour

Bootstrap 4 comprend également les boutons de contour (boutons fantômes). Dans les cas où vous auriez besoin de boutons plus subtils sans les couleurs d’arrière-plan lourdes.

Pour créer le bouton de contour, remplacez la classe de modificateur de bouton par défaut par .btn-outline-* Une variante.

Toutes les options des boutons de contour sont répertoriées ci-dessous.

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Tailles des clés

Petits et grands

Vous pouvez changer la taille du bouton très facilement en l’ajoutant btn-lg ou btn-sm Classe aussi. Ces classes modifient le remplissage des boutons ainsi que la taille de la police.

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

Boutons de blocage

Ajouter btn-block Classez sur le bouton pour créer un bouton de bloc qui s’étend sur la largeur de l’élément parent.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

Boutons actifs et désactivés

Boutons actifs

Boutons si utilisé avec <button> Élément, automatiquement enfoncé (c’est-à-dire affiché avec un arrière-plan et une bordure plus sombres) lorsqu’il est actif.

Lors de l’utilisation de classes de boutons <a> Élément, vous devez .active Classe pour atteindre la même chose.

Boutons désactivés

Voici comment désactiver un bouton lorsque vous en utilisez un <button> Élément, insérer disabled Attribut à cela.

Si tu as una class="btn">il suffit d’ajouter .disabled Classe sur le bouton comme dans l’exemple suivant.

Le voir en direct

Voir le stylo Boutons Bootstrap: classes actives et désactivées depuis Ondrej (@ondrejsvestka) sur CodePen.


Alignez les boutons bootstrap

Vous pouvez facilement aligner les boutons d’amorçage à l’aide des classes d’utilitaires d’amorçage sur le bouton parent du bouton.

Aligner le bouton à gauche

Utiliser text-left Classe utilitaire aussi Alignez à gauche le bouton Bootstrap.

<div class="text-left">
    <a href="https://bootstrapious.com/p/#" class="btn btn-primary">Left align</a>
</div>

Bouton d’amorçage du milieu

Utiliser text-centerClasse utilitaire aussi Centrer le bouton d’amorçage.

<div class="text-center">
    <a href="https://bootstrapious.com/p/#" class="btn btn-primary">Center align</a>
</div>

Aligner le bouton à droite

Utiliser text-right Classe utilitaire aussi Alignez le bouton d’amorçage sur la droite.

<div class="text-right mb-3">
    <a href="https://bootstrapious.com/p/#" class="btn btn-primary">Right align</a>
</div>

Le voir en direct

Voir le stylo Boutons Bootstrap: Aligner – Gauche, Centre, Droite depuis Ondrej (@ondrejsvestka) sur CodePen.


Groupe de boutons et barre d’outils Bootstrap

Groupe clé

Pour créer un beau look Ensemble de boutonsles envelopper dans un .btn-group parent.

Vous pouvez également utiliser les plugins JavaScript Bootstrap pour transformer le groupe de boutons en bouton radio.

<div class="btn-group" role="group" aria-label="Button group example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Barre d’outils des boutons

Comment créer un Barre d’outils, regroupez plusieurs groupes de boutons en un seul .btn-toolbar.

Aucun espace n’est ajouté automatiquement entre les groupes de boutons. À Ajoutez de l’espace à votre barre d’outils, utiliser Utilitaires de distance Bootstrap.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="Button group example">
    <button type="button" class="btn btn-outline-secondary">B</button>
    <button type="button" class="btn btn-outline-secondary">I</button>
    <button type="button" class="btn btn-outline-secondary">U</button>
  </div>

  <div class="btn-group" role="group" aria-label="Button group example">
    <button type="button" class="btn btn-outline-secondary">L</button>
    <button type="button" class="btn btn-outline-secondary">R</button>
    <button type="button" class="btn btn-outline-secondary">T</button>
  </div>
</div>

Le voir en direct

Voir le stylo Boutons Bootstrap: groupes de boutons et barres d’outils depuis Ondrej (@ondrejsvestka) sur CodePen.


Bouton radio Bootstrap

Sangles de botte button Les styles peuvent être appliqués à d’autres éléments, tels que: <label>s pour activer le basculement des cases à cocher ou des boutons radio.

Ajouter data-toggle="buttons" à un .btn-group Contient ces boutons modifiés pour activer et ajouter leur comportement de bascule via JavaScript .btn-group-toggle se coiffer de manière appropriée <input>s dans vos boutons.

Notez que si les boutons sont pré-activés, vous devrez l’ajouter manuellement .active Classe aux entrées <label> et aussi le checked Attribut au input soi.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

Le voir en direct

Voir le stylo Boutons Bootstrap: bouton radio depuis Ondrej (@ondrejsvestka) sur CodePen.


Boutons spéciaux et personnalisés

Un bouton personnalisé pour télécharger des fichiers

Bootstrap 4 comprend un modèle personnalisé magnifiquement conçu Bouton Télécharger les fichiersCependant, vous pouvez également créer un bouton entièrement personnalisé qui lance le navigateur de fichiers pour sélectionner facilement un téléchargement de fichier.

Pour plus d’informations sur le sujet, y compris des exemples, consultez mon Téléchargez le fichier Bootstrap 4 Coupé.

Boutons de cercle Bootstrap

Avec un peu de style CSS personnalisé, vous pouvez également en créer des personnalisés Bootstrap 4 boutons circulaires. Voir plus dans mon extrait.



Source link

Recent Posts