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 colonnes
|
Classe 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écalages
|
Classes 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és
|
Ecran
|
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 composants
|
Composant
|
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 HTML
|
Addresses
<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 requis
|
Le Framework Bootstrap est basé sur les derniers langages du Web : HTML 5 & CSS 3 et nécessite jQuery pour fonctionner.
|
Editeurs de Thèmes Bootstrap
|
Bootstrap 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
|
