Cheatography
https://cheatography.com
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>Titre</h1> |
Niveau de titre obligatoire et unique |
<h%>Titre x</h%> |
Niveau de titre moins important et facultatif |
<small>Sous-titre</small> |
Où % est le niveau de titre, de 2 à 6
Mise en forme de texte
<p class="text-lowercase"></p> |
texte en minuscule |
<p class="text-uppercase"></p> |
TEXTE EN MAJUSCULE |
<p class="text-capitalize"></p> |
Texte Capitalisé |
Alignement des textes
<p class="text-left"></p> |
Texte aligné à gauche |
<p class="text-right"></p> |
Texte aligné à droite |
<p class="text-center"></p> |
Texte aligné au centre |
<p class="text-justify"></p> |
Texte justifié |
<p class="text-nowrap"></p> |
Texte sans retour à la ligne |
Alignement des blocs
<div class="pull-left"></div> |
Aligner le bloc à gauche |
<div class="pull-right"></div> |
Aligner le bloc à droite |
<div class="center-block"></div> |
Aligner le bloc au centre |
<div class="clearfix"></div> |
Supprime les flottements |
Visibilité des éléments
.visible-xs-* |
Affiche l'élément |
.visible-sm-* |
uniquement pour la |
.visible-md-* |
taille sélectionnée |
.visible-lg-* |
.hidden-xs |
Masque l'élément |
.hidden-sm |
uniquement pour la |
.hidden-md |
taille sélectionnée |
.hidden-lg |
.visible-%-block |
Modifie la propriété |
.visible-%-inline |
display de l'élément |
.visible-%-inline-block |
sélectionné |
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-default">Label par défaut</span> |
label-primary, label-success, label-info, label-warning, label-danger |
|
|
Boutons
<a class="btn btn-default" href="#" role="button">...</a> |
<button class="btn btn-default" type="submit">...</button> |
<input class="btn btn-default" type="button" value="..."> |
<input class="btn btn-default" type="submit" value="..."> |
btn-default, btn-primary, btn-success, btn-info, btn-warning |
btn-danger, 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>
|
Formulaires : 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 / Breadcrumbs
<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>
|
|
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets