Show Menu

Ressources pour Bootstrap Cheat Sheet by

Un petit rappel des classes Bootstraps & quelques liens pour booster la productivité avec Bootstrap
javascript     css3     html5     jquery     bootstrap

Structure d'une page HTML avec Bootstrap

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <title>Bootstrap Page</title>
  </head>
  <body>
    <div class="container"> <!-- ou class="container-fluid" -->
      <div class="row">
        ////// Colonnes de la page
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Gestion des colonnes

Classe de la colonne
Taille de l'écran
Largeur du contai­ner
.col-xs-#
>0
auto
.col-sm-#
>768px
750px
.col-md-#
>992px
970px
.col-lg-#
>1200px
1170px
Le # est à remplacer par un nombre entre 1 et 12. Ces classes s'appl­iquent sur des <di­v> et doivent être incluses dans des <di­v> avec la class "­row­", eux-même contenus dans un <di­v> avec la class "­con­tai­ner­" ou "­con­tai­ner­-fl­uid­".

Gestion des colonnes - Offsets & Décalages

Classes d'offset
Classes de Push
Classes de Pull
Marge à gauche
Décalage à droite
Décalage à gauche
.col-s­m-o­ffset-#
.col-s­m-p­ush-#
.col-s­m-p­ull-#
.col-m­d-o­ffset-#
.col-m­d-p­ush-#
.col-m­d-p­ull-#
.col-l­g-o­ffset-#
.col-l­g-p­ush-#
.col-l­g-p­ull-#

Classes de Visibi­lités

Ecran
Taille de l'écran
Affi­chage
Cache
Smart­phones
<767px
.visib­le-xs
.hidden-xs
Table­ttes
>768px & <991px
.visib­le-sm
.hidden-sm
PC de Bureau
>992px & <1199px
.visib­le-md
.hidden-md
Ecrans Larges
>1200px
.visib­le-lg
.hidden-lg
Impre­ssion
 
.visib­­le­-­print
.hidde­­n-­print
Lecteur d'écran
 
sr-only
Les classes d'affi­chage (.visi­ble-*) n'affi­chent que pour la taille indiquée.
Les classes pour cacher (.hidd­en-*) affichent sur les autres tailles que celle indiquée.
La classe sr-only peut être combinée avec sr-on­ly-­foc­usable pour que l'élément ne s'affiche que lorqu'il est en état focus

Classes Helpers

.clearfix
Clearfix (reset les floats)
block
.pull-left
Force un float à gauche
block
.pull-­right
Force un float à droite
block
.cente­r-block
Centre l'objet HTML comme un block
tous
.show
Force l'affi­chage
block
.hidden
Force la dissim­ulation
block
.invisible
Rend invisible
tous
.badge
Badge aligné à droite
<sp­an>
.initi­alism
Diminue la taille de police
<ab­br>
block, inline et inline­-block désignent le type d'affi­chage de l'élément (display css).

Textes & Paragr­aphes <p> <sp­an>

.text-­co­ntext
Couleur contex­tuelle
(cont­ext* = primary, success, info, warning ou danger)
.text-­alig
Alignement
(alig = left, center, right, justify ou nowrap)
.text-­tr­ans­form
Transf­orm­ation de caractère
(tran­sform = lowercase, uppercase ou capita­lize)
.text-hide
Cacher le texte
(utile pour remplacer un titre par une image)
.bg-c­ontext
Couleur de fond contex­tuelle
(context = muted, primary, success, info, warning, danger)
.h#
Même apparence qu'un titre (# = 1 à 6)
.small
Même apparence que <sm­all>
.lead
Paragraphe principal

Images <im­g>

.img-r­esp­onsive
Image Responsive
.img-r­ounded
Bords arrondis
.img-c­ircle
Bordure circulaire
.img-t­hum­bnail
Double Bord

Tableaux <ta­ble>

.table
Style de base (obl.)
.table­-st­riped
Couleurs alternées
.table­-bo­rdered
Bordure
.table­-hover
Couleur de la ligne active
.table­-co­ndensed
Petites lignes
.table­-re­spo­nsive
Scroll horizontal pour un écran <768px
La classe .table est nécessaire pour utiliser l'une des autres classes.

Contexte de colonnes ou lignes <tr> <td> <th>

.active
.success
.warning
.info
.danger
Ces classes, appliquées sur une ligne ou une cellule, permettent de changer la couleur de fond de celle-ci afin de corres­pondre à un contexte donné.
La couleur de fond pour la classe active est la même que la couleur de la ligne survolé avec la classe .table­-ho­vered sur le tableau.

Listes

.list-­­un­s­tyled
Liste sans puces
<ul>
.list-­inline
Liste en ligne
<ul>
.dl-ho­­ri­z­ontal
Affichage de liste de défini­tions en tableau
<dl>

Formul­aires

.form-­inline
Formulaire sur une ligne
<fo­rm>
.form-­hor­izontal
Formulaire avec le <la­bel> et le <in­put> sur une ligne
<fo­rm>
.form-­control
Style de base (obl.)
textual <in­put­>, <te­xta­rea> & <se­lec­t>
.input­-t­aille
Taille de l'input
textual <in­put­>, <te­xta­rea> & <se­lec­t>
<*t­aille : sm ou lg)
.form-­group
Style de base (obl.) pour le <di­v> incluant le <la­bel> et son <in­put>
<di­v>
.form-­group .has-­con­text
Contexte de résultat
<di­v>
(context : success, warning, error)
.checkbox
Sous-g­roupe pour les checkbox
<di­v>
.check­box­-inline
 
<di­v>
.radio
Sous-g­roupe pour les radio controls
<di­v>
.radio­-inline
 
<di­v>
.input­-group
Permet accoler des div à un <in­put> pour donner des indica­tions
<di­v>
.input­-gr­oup­-addon
Blocks accolés à l'input
<di­v>
.form-­con­tro­l-s­tatic
Valeurs fixes
<p>

Liste des composants

Comp­osant
Classe Princi­pale
Menus droulants
.dropdown (& .dropd­own­-toggle & ul.dro­pdo­wn-­menu)
Boutons accollés & Boutons déroulants
.btn-group
Barre de navigation
.nav
Barre de navigation principale
.navbar
Fil d'Ariane
.bread­crumb
Pagination
ul.pag­ination
Labels
.label.la­bel-* (* : contect)
Badges
span.badge
A utiliser au sein d'un lien ou d'un bouton
Jumbotron
.jumbotron
Entête de page
.page-­header
Vignettes automa­tiques
a.thum­nails
Code : <a href="#­" class=­"­thu­mbn­ail­"> <img src="..." alt="..."> </a>
Messages d'alerte
.alert .alert­-c­ontext (context : type de message)
Objets Media
.media
Listes en groupe (accolés)
.list-­group
Panneaux
.panel
Code embarqué responsive
.embed­-re­spo­nsi­ve-item
Cadre incrusté
.well
 

Boutons

.btn
Classe de base (obl.)
.btn-­con­text
Contexte
(context = d­efault, s­uccess, w­arning, p­rimary, info, d­anger)
.btn-­taille
Taille du bouton (taille = xs, sm, lg)
btn-block
Affiche le bouton sur toute la largeur
.btn-link
Apparrence de lien
.active
A tag - état enfoncé
.disabled
A tag - état désactivé
(bouton & input : ajouter disabl­ed=­"­dis­abl­ed")
S'applique aux balises suivantes :
<bu­tto­n>
<a>
<input type='­sub­mit­'>
<input type='­but­ton­'>

Navbar

.navbar
.navba­r_brand
.navba­r-c­ollapse
.navba­r-t­oggle
.navba­r-btn

Labels <sp­an>

.label
 
<sp­an>
.label­-de­fault
 
<sp­an>
.label­-pr­imary
 
<sp­an>
.label­-su­ccess
 
<sp­an>
.label­-info
 
<sp­an>
.label­-wa­rning
 
<sp­an>
.label­-danger
 
<sp­an>

Messages d'alerte

.alert
Classe de base (obl.)
.alert­-c­ontext
Couleur contex­tuelle
(context = default, success, info, warning, danger)
.alert­­-d­i­s­mi­­ssable
Message refermable
<button type="b­­ut­t­o­n" class=­­"­c­lo­­se" data-d­­is­m­i­ss­­="al­­er­t­" aria-h­­id­d­e­n=­­"­­tr­u­e­"­>&­ti­­mes­­;<­/­b­ut­­ton>
<button type="b­utt­on" class=­"­clo­se" aria-l­abe­l="C­los­e"><span aria-h­idd­en=­"­tru­e">&ti­mes­;</­spa­n><­/bu­tto­n>
<a href="#­­" class=­­"­a­le­­rt-­­li­n­k­"­>...<­­/a>

Panels

.panel­-group
.panel .panel­-de­fault
.panel­-he­ading
.panel­-co­llapse
.panel­-body

Exemples Codes HTML

Addr­­es­ses
<ad­­dr­e­s­s> <st­­ro­n­g­>T­­witter, Inc.</­­st­r­o­ng­­><b­­r> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<­­br> <abbr title=­­"­P­ho­­ne">­­P:­<­/­ab­­br> (123) 456-7890 </a­­dd­r­e­ss>
Glyp­hic­ons (## : icône)
<span class=­­"­g­ly­­phicon glyphi­­co­n­-­##­"><­­/s­p­a­n>
Flèche de liste déroul­ante
<span class=­"­car­et">­</s­pan>
Abbr­évi­ati­ons
<abbr title=­­"­a­tt­­rib­­ut­e­"­­>at­­tr­<­/­ab­­br>
Texte surligné
<ma­rk>­hig­hli­ght­</m­ark>
Texte effacé (barré)
<de­l>d­eleted text</­del>
Texte barré
<s>­str­icked text</­s>
Texte inséré (souligné)
<in­s>added text</­ins>
Texte souligné
<u>­und­erlined text</­u>
Texte plus petit
<sm­all­>small text</­sma­ll>
Texte gras
<st­ron­g>bold text</­str­ong>
Texte italique
<em­>it­ali­cized text</­em>

<bl­ock­quo­te>

Format de Base
<bl­­oc­k­q­uo­­te> <p>­­Lorem ipsum dolor sit amet, consec­­tetur adipiscing elit. Intege­­r<­/­p> </b­­lo­c­k­qu­­ote>
Format étendu
<bl­ock­quo­te> <p>­Lorem ipsum dolor sit amet, consec­tetur adipiscing elit. Integer posuere erat a ante.<­/p> <fo­ote­r>S­omeone famous in <cite title=­"­Source Title">­Source Title<­/ci­te>­</f­oot­er> </b­loc­kqu­ote>
Alig­nement à droite (classe)
.block­­qu­o­t­e-­­reverse

Affichage de code

<co­de>
fragments de code
inline
<kb­d>
affichage d'une touche
inline
<pr­e>
Code
block
<pre class=­"­pre­-sc­rol­lab­le">
Code
block
(avec scroll vertical pour une hauteur >350px)
<va­r>
Variables
inline
<sa­mp>
Sortie de terminal
block

Eléments requis

Le Framework Bootstrap est basé sur les derniers langages du Web : HTML 5 & CSS 3 et nécessite jQuery pour foncti­onner.

Licence

Bootstrap is released under the MIT license and is copyright 2015 Twitter.
Plus d'info : http:/­/ge­tbo­ots­tra­p.c­om/­get­tin­g-s­tar­ted­/#l­ice­nse­-faqs

Download the Ressources pour Bootstrap Cheat Sheet

6 Pages
//media.cheatography.com/storage/thumb/weizu_ressources-pour-bootstrap.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

          Web Programming Cheat Sheet
          jQuery Cheat Sheet
          jQuery Mobile Cheat Sheet

          More Cheat Sheets by Weizu

          Plugins de Navigateurs pour les Web Workers Cheat Sheet