Bootstrap Cheatsheet

"Bootstrap Cheatsheet : Toutes les fonctions en un coup d'œil !"

Bases & syntaxe

<button type="button" class="btn btn-primary">Primary</button>

Utiliser les classes Bootstrap pour créer des boutons stylés.

Structures de données

<div class="container">
  <div class="row">
    <div class="col-md-4 col-sm-6">Column 1</div>
    <div class="col-md-4 col-sm-6">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

Utiliser les classes de grille pour créer des structures responsive.

Fonctions & methodes essentielles

$(document).ready(function() {
  $('.my-element').hide();
});

Utiliser jQuery pour manipuler les éléments du DOM en fonction de l'état de la page.

Patterns courants

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Utiliser les classes de dropdown pour créer des menus déroulants.

Operations avancees

<div class="card-deck">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
  </div>
</div>

Utiliser les classes de carte pour créer des éléments réactifs et stylisés.

Debugging & outils

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="alert alert-danger" role="alert">This is a danger alert—check it out!</div>
    </div>
  </div>
</div>

Utiliser les classes d'alerte pour afficher des messages d'erreur ou d'avertissement.

Projet Bootstrap a lancer ?

Besoin d'aide sur un projet ? Decrivez-le pour des conseils personnalises.

Recevoir des conseils

Questions frequentes

A quoi sert cette cheatsheet Bootstrap ?

Cette cheatsheet Bootstrap regroupe la syntaxe, les commandes et les astuces essentielles pour Bootstrap. Elle est concue pour servir d'aide-memoire rapide, que vous soyez debutant ou developpeur confirme cherchant une reference rapide.

Comment utiliser cette cheatsheet Bootstrap ?

Parcourez les sections pour trouver la syntaxe ou la commande dont vous avez besoin. Vous pouvez la garder ouverte dans un onglet pendant que vous codez, ou la copier dans vos notes pour un acces hors ligne.

Cette cheatsheet est-elle a jour ?

Oui, nos cheatsheets sont regulierement mises a jour pour refleter les dernieres versions et bonnes pratiques de Bootstrap. Si vous remarquez une information obsolete, n'hesitez pas a nous contacter.