Bootstrap 3 Cheat Sheet

A Programming cheat sheet in français (French) by ralakei

13,172 views 6,100 downloads 26 Jan 2016 History

PRs

4.5 avg · 3 ratings

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>

Badges

Nice Cheat Sheet Good Cheat Sheet Downloaded from Unusual Locations × 4 🇪🇬 Big in Egypt

Comments

No comments yet.