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