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” > & times; < /button>
|
|
< button type=” button” class=” close” aria-label=” Close” > < span aria-hidden=” true” > & times; < /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
|
