Tutoriel Bootstrap

Bootstrap

Découvez les bases du plus célébre des frameworks CSS.

HTML HTML5 CSS Dreamweaver PHP

Boutons Bootstrap

Dans bootstrap, vous pourrez créer des boutons avec les balises : <a>, <button>, <input>.

Si vous utilisez la balise <a>, il faudra ajouter l'attribut : role="button".

D'après la documentation de Bootstrap, il serait préférable d'utiliser la balise <button> pour obtenir un meilleur rendu

Il y a de même un bug connu sur la hauteur de ligne sur les versions de Firefox <30. En savoir +

<a class="btn btn-default" href="#" role="button">Lien</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
Lien

Des boutons de couleur

Correspondance des couleurs :

  • default : par défaut
  • primary : un peu comme vous voulez
  • success : une action réussie
  • info : passer une information
  • warning : il faut faire attention
  • danger : annonce un danger

Après, il n'y a pas d'obligation, vous pouvez bien entendu les utiliser comme bon vous semble.

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>

Exemple

Taille des boutons

Vous pouvez modifier la taille des boutons avec les classe .btn-lg, .btn-sm, .btn-xs.
<button type="button" class="btn btn-lg btn-primary">Bouton Primary avec la classe .btn-lg</button>
<button type="button" class="btn btn-sm btn-primary">Bouton Primary avec la classe .btn-sm</button>
<button type="button" class="btn btn-xs btn-primary">Bouton Primary avec la classe .btn-xs</button>

Exemple







Si vous voulez un bouton qui prend la totalité de l'élément parent, il faut ajouter la classe .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Bouton avec la classe .btn-block </button>
<button type="button" class="btn btn-default btn-lg btn-block">Bouton avec la classe .btn-block </button>

Exemple

Statut activé

Sur un bouton

Les boutons apparaissent enfoncé avec un fond et une bordure plus sombre lorsqu'ils sont actifs

Pour les balises <button>, ca se fait via :active, par contre pour les balises <a>, ça se fait via la classe .active

pas besoin d'ajouter :active comme c'est une pseudo-classe, si vous voulez changer l'apparence, vous pouvez toujours ajouter la classe .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button </button> <button type="button" class="btn btn-default btn-lg active">Button </button>

Exemple

Sur un lien

Il suffit d'ajouter la classe .active sur le lien.
<a href="#" class="btn btn-primary btn-lg active" role="button" title="Lien 1">Lien 1</a>
<a href="#" class="btn btn-default btn-lg active" role="button" title="Lien 2">Lien 2</a>

Exemple

Lien 1 Lien 2

Etat désactivé

Sur un bouton

Il suffit d'appliquer la classe .disabled sur la balise button.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Bouton désactivé</button>

Exemple

Sur un lien

Il suffit d'appliquer la classe .disabled sur la balise a.
<a href="#" class="btn btn-primary btn-lg disabled" role="button" title="Lien">Lien</a>

Exemple

Lien

 

Ce site est liste dans la categorie Enseignement et formation : Formations professionnelles de l'annuaire Référencement et Dictionnaire

Frédéric création Jardin | Concinnatis | Au petit grandeur | Lestrem TP | Jerico | Solumetal | Comonmarket | Chez Beau J'ai | Beukenne Traiteur | PDP Recouvrement | Agroé - Achat groupé d'énérgie | Achat goupé Sorea | CE LM énergie | placedesenergies.com | Gazon de la Folie | Dépannage pôele à pellet | Création site web Nord | Rénovation habitat Pas de calais | Cuisine Bois | Créperie à Valenciennes | Repar Coudre | DNS service | Archis 2 | 3MI | Tests d'orientation professionnels - Solutests | Ircl | Leblan promotion | Formation webmaster, PAO, CAO / DAO | Formateur Web, référencement et PAO | Formateur bureautique |