Show Menu

Bootstrap 3 Cheat Sheet by

bootstrap

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>

Download the Bootstrap 3 Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/ralakei_bootstrap-3.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

Like this cheat sheet? Check out our sponsors!

Readable.io is a collection of tools to make your writing better. More readable content means higher conversion rates and better reader engagement. Measure website and document readability, measure keyword density and more!

Click Here To Get Started!

 

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
          Bootstrap3-SASS-Mixins Cheat Sheet