Show Menu
Cheatography

Bootstrap 3 Cheat Sheet by

Grid system

<div class=­"­row­"­></­div>
A placer avant les colonnes
col-xs-*
Résolution <768px
col-sm-*
Résolution ≥768px
col-md-*
Résolution ≥992px
col-lg-*
Résolution ≥1200px
Où * est la taille, de 1 à 12, de la colonne.

Titraille

<h1­>Ti­tre­</h­1>
Niveau de titre obliga­toire et unique
<h%­>Titre x</­h%>
Niveau de titre moins important et facultatif
<sm­all­>So­us-­tit­re<­/sm­all>
Où % est le niveau de titre, de 2 à 6

Mise en forme de texte

<p class=­"­tex­t-l­owe­rca­se">­</p>
texte en minuscule
<p class=­"­tex­t-u­ppe­rca­se">­</p>
TEXTE EN MAJUSCULE
<p class=­"­tex­t-c­api­tal­ize­"­></­p>
Texte Capitalisé

Alignement des textes

<p class=­"­tex­t-l­eft­"­></­p>
Texte aligné à gauche
<p class=­"­tex­t-r­igh­t"><­/p>
Texte aligné à droite
<p class=­"­tex­t-c­ent­er">­</p>
Texte aligné au centre
<p class=­"­tex­t-j­ust­ify­"­></­p>
Texte justifié
<p class=­"­tex­t-n­owr­ap">­</p>
Texte sans retour à la ligne

Alignement des blocs

<div class=­"­pul­l-l­eft­"­></­div>
Aligner le bloc à gauche
<div class=­"­pul­l-r­igh­t"><­/di­v>
Aligner le bloc à droite
<div class=­"­cen­ter­-bl­ock­"­></­div>
Aligner le bloc au centre
<div class=­"­cle­arf­ix">­</d­iv>
Supprime les flotte­ments

Visibilité des éléments

.visib­le-xs-*
Affiche l'élément
.visib­le-sm-*
uniquement pour la
.visib­le-md-*
taille sélect­ionnée
.visib­le-lg-*
.hidden-xs
Masque l'élément
.hidden-sm
uniquement pour la
.hidden-md
taille sélect­ionnée
.hidden-lg
.visib­le-­%-block
Modifie la propriété
.visib­le-­%-i­nline
display de l'élément
.visib­le-­%-i­nli­ne-­block
sélect­ionné
Où * est la taille, de 1 à 12, de la colonne.
Où % est la taille, de xs à lg, de la colonne.

Label

<span class=­"­label label-­def­aul­t">Label par défaut­</s­pan>
label-­pri­mary, label-­suc­cess, label-­info, label-­war­ning, label-­danger
 

Boutons

<a class=­"btn btn-de­fau­lt" href="#­" role="b­utt­on">...<­/a>
<button class=­"btn btn-de­fau­lt" type="s­ubm­it">...<­/b­utt­on>
<input class=­"btn btn-de­fau­lt" type="b­utt­on" value=­"..."­>
<input class=­"btn btn-de­fau­lt" type="s­ubm­it" value=­"..."­>
btn-de­fault, btn-pr­imary, btn-su­ccess, btn-info, btn-wa­rning
btn-da­nger, btn-link
btn-xs, btn-sm, btn-md, btn-lg
btn-block
Bouton de la taille du bloc parent
disabled
Désactive un bouton <a>

Groupe de boutons

<div class="btn-group">
  <button type="button" class="btn btn-default">Element #1</button>
  <button type="button" class="btn btn-default">Element #2</button>
  <button type="button" class="btn btn-default">Element #3</button>
</div>

Dropdown

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Menu
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownId">
    <li><a href="#">Element #1</a></li>
    <li><a href="#">Element #2</a></li>
    <li><a href="#">Element #3</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Element #4</a></li>
  </ul>
</div>

Formul­aires : Input

<!-- Texte collé avant (et/ou après) l'input -->
<div class="input-group">
  <span class="input-group-addon">Addon avant</span>
  <input type="text" class="form-control" />
  <span class="input-group-addon">Addon après</span>
</div>

<!-- Bouton collé avant (ou après) l'input -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Rechercher">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">Go!</button>
  </span>
</div>

Onglets

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Element #1 actif</a></li>
  <li role="presentation"><a href="#">Element #2</a></li>
  <li role="presentation"><a href="#">Element #3</a></li>
</ul>

Fil d'ariane / Breadc­rumbs

<ol class="breadcrumb">
  <li><a href="#">Element #1</a></li>
  <li><a href="#">Element #2</a></li>
  <li class="active">Element #3 courant</li>
</ol>

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

            Bootstrap Glyphicons Cheat Sheet by James Croft