Show Menu
Cheatography
  1. Home >
  2. Cheat Sheets >

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
 

Metadata

  • Languages:
  • Published: 26th January, 2016
  • Last Updated: 11th May, 2016
  • Rated: 5 stars based on 2 ratings

Favourited By

Vicnet cemal96 ralakei

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