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 colonnesClasse 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'appliquent sur des <div> et doivent être incluses dans des <div> avec la class "row", eux-même contenus dans un <div> avec la class "container" ou "container-fluid". Gestion des colonnes - Offsets & DécalagesClasses d'offset | Classes de Push | Classes de Pull | Marge à gauche | Décalage à droite | Décalage à gauche | .col-sm-offset-# | .col-sm-push-# | .col-sm-pull-# | .col-md-offset-# | .col-md-push-# | .col-md-pull-# | .col-lg-offset-# | .col-lg-push-# | .col-lg-pull-# |
Classes de VisibilitésEcran | Taille de l'écran | Affichage | Cache | Smartphones | <767px | .visible-xs | .hidden-xs | Tablettes | >768px & <991px | .visible-sm | .hidden-sm | PC de Bureau | >992px & <1199px | .visible-md | .hidden-md | Ecrans Larges | >1200px | .visible-lg | .hidden-lg | Impression | | .visible-print | .hidden-print | Lecteur d'écran | | sr-only |
Les classes d'affichage (.visible-*) n'affichent que pour la taille indiquée.
Les classes pour cacher (.hidden-*) affichent sur les autres tailles que celle indiquée.
La classe sr-only peut être combinée avec sr-only-focusable 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 | .center-block | Centre l'objet HTML comme un block | tous | .show | Force l'affichage | block | .hidden | Force la dissimulation | block | .invisible | Rend invisible | tous | .badge | Badge aligné à droite | <span> | .initialism | Diminue la taille de police | <abbr> |
block, inline et inline-block désignent le type d'affichage de l'élément (display css). Textes & Paragraphes <p> <span>.text-context | Couleur contextuelle | (context* = primary, success, info, warning ou danger) | .text-alig | Alignement | (alig = left, center, right, justify ou nowrap) | .text-transform | Transformation de caractère | (transform = lowercase, uppercase ou capitalize) | .text-hide | Cacher le texte | (utile pour remplacer un titre par une image) | .bg-context | Couleur de fond contextuelle | (context = muted, primary, success, info, warning, danger) | .h# | Même apparence qu'un titre (# = 1 à 6) | .small | Même apparence que <small> | .lead | Paragraphe principal |
Images <img>.img-responsive | Image Responsive | .img-rounded | Bords arrondis | .img-circle | Bordure circulaire | .img-thumbnail | Double Bord |
Tableaux <table>.table | Style de base (obl.) | .table-striped | Couleurs alternées | .table-bordered | Bordure | .table-hover | Couleur de la ligne active | .table-condensed | Petites lignes | .table-responsive | 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 correspondre à 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-hovered sur le tableau. Listes.list-unstyled | Liste sans puces | <ul> | .list-inline | Liste en ligne | <ul> | .dl-horizontal | Affichage de liste de définitions en tableau | <dl> |
Formulaires.form-inline | Formulaire sur une ligne | <form> | .form-horizontal | Formulaire avec le <label> et le <input> sur une ligne | <form> | .form-control | Style de base (obl.) | textual <input>, <textarea> & <select> | .input-taille | Taille de l'input | textual <input>, <textarea> & <select> | <*taille : sm ou lg) | .form-group | Style de base (obl.) pour le <div> incluant le <label> et son <input> | <div> | .form-group .has-context | Contexte de résultat | <div> | (context : success, warning, error) | .checkbox | Sous-groupe pour les checkbox | <div> | .checkbox-inline | | <div> | .radio | Sous-groupe pour les radio controls | <div> | .radio-inline | | <div> | .input-group | Permet accoler des div à un <input> pour donner des indications | <div> | .input-group-addon | Blocks accolés à l'input | <div> | .form-control-static | Valeurs fixes | <p> |
Liste des composantsComposant | Classe Principale | Menus droulants | .dropdown (& .dropdown-toggle & ul.dropdown-menu) | Boutons accollés & Boutons déroulants | .btn-group | Barre de navigation | .nav | Barre de navigation principale | .navbar | Fil d'Ariane | .breadcrumb | Pagination | ul.pagination | Labels | .label.label-* (* : contect) | Badges | span.badge | A utiliser au sein d'un lien ou d'un bouton | Jumbotron | .jumbotron | Entête de page | .page-header | Vignettes automatiques | a.thumnails | Code : <a href="#" class="thumbnail"> <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-responsive-item | Cadre incrusté | .well |
| | Boutons.btn | Classe de base (obl.) | .btn-context | Contexte | (context = default, success, warning, primary, info, danger) | .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 disabled="disabled") |
S'applique aux balises suivantes :
<button>
<a>
<input type='submit'>
<input type='button'> Navbar.navbar | .navbar_brand | .navbar-collapse | .navbar-toggle | .navbar-btn |
Labels <span>.label | | <span> | .label-default | | <span> | .label-primary | | <span> | .label-success | | <span> | .label-info | | <span> | .label-warning | | <span> | .label-danger | | <span> |
Messages d'alerte.alert | Classe de base (obl.) | .alert-context | Couleur contextuelle | (context = default, success, info, warning, danger) | .alert-dismissable | Message refermable | <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> | <button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button> | <a href="#" class="alert-link">...</a> |
Panels.panel-group | .panel .panel-default | .panel-heading | .panel-collapse | .panel-body |
Exemples Codes HTMLAddresses <address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> | Glyphicons (## : icône) <span class="glyphicon glyphicon-##"></span> | Flèche de liste déroulante <span class="caret"></span> | Abbréviations <abbr title="attribute">attr</abbr> | Texte surligné <mark>highlight</mark> | Texte effacé (barré) <del>deleted text</del> | Texte barré <s>stricked text</s> | Texte inséré (souligné) <ins>added text</ins> | Texte souligné <u>underlined text</u> | Texte plus petit <small>small text</small> | Texte gras <strong>bold text</strong> | Texte italique <em>italicized text</em> |
<blockquote>Format de Base <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer</p> </blockquote> | Format étendu <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> | Alignement à droite (classe) .blockquote-reverse |
Affichage de code<code> | fragments de code | inline | <kbd> | affichage d'une touche | inline | <pre> | Code | block | <pre class="pre-scrollable"> | Code | block | (avec scroll vertical pour une hauteur >350px) | <var> | Variables | inline | <samp> | Sortie de terminal | block |
Eléments requisLe Framework Bootstrap est basé sur les derniers langages du Web : HTML 5 & CSS 3 et nécessite jQuery pour fonctionner. |
Editeurs de Thèmes BootstrapBootstrap Magic | | Lavish Bootstrap | | Boot Theme | | Bootstrap Designer | | PaintStrap | | JQuery UI Bootstrap Theme | | Bootstrap Hero ($) | |
Les éditeurs payants sont marqués d'un ($) Ressources de Développement
Thèmes Payants - Places de Marchés
|
Created By
alexandre.achain.chez.com
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by Weizu