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

Ressources pour Bootstrap Cheat Sheet by

Un petit rappel des classes Bootstraps & quelques liens pour booster la productivité avec 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 container
.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
Affichage
Cache
Smartp­hones
<767px
.visib­le-xs
.hidden-xs
Tablettes
>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
Impression
  
.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-onl­y-f­ocu­sable 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-context
Couleur contex­tuelle
(context* = primary, success, info, warning ou danger)
.text-alig
Alignement
(alig = left, center, right, justify ou nowrap)
.text-transform
Transf­orm­ation de caractère
(transform = lowercase, uppercase ou capita­lize)
.text-hide
Cacher le texte
(utile pour remplacer un titre par une image)
.bg-context
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-taille
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-context
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

Composant
Classe Principale
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-context (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-context
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-context
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­esses
<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>
Glyphicons (## : icône)
<span class=­­"­g­ly­­phicon glyphi­­con­-##"­><­­/sp­­an>
Flèche de liste déroulante
<span class=­"­car­et">­</s­pan>
Abbrév­iations
<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>
Alignement à 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.

Editeurs de Thèmes Bootstrap

Ressources de Dévelo­ppement

Thèmes Gratuits

Thèmes Payants - Places de Marchés

Forks de Bootstrap 2

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
               
 

Metadata

  • Languages:
  • Published: 21st June, 2015
  • Last Updated: 17th November, 2016
  • Rated: 5 out of 5 stars based on 3 ratings

Favourited By

charaf ess dsto dockawash Vicnet yonsolo

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
          Les Top 10 des plateformes de MOOCs Cheat Sheet