Cheat sheet bootstrap 3
cheat sheet bootstrap 3 pdf
...
Rappel :
Bootstrap est une collection d'outils utiles à la création du design (graphisme, animation et interactions avec la page dans le navigateur ... etc. ...) de sites et d'applications web. C'est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. C'est l'un des projets les plus populaires sur la plate-forme de gestion de développement GitHub.
Bootstrap est compatible avec les dernières versions des navigateurs majeurs, mais peut fonctionner de manière dégradée sur des navigateurs plus anciens.
Depuis la version 2, le framework adopte la conception de sites web adaptatifs5, permettant aux projets utilisant Bootstrap de s'adapter dynamiquement au format des supports depuis lesquels ils sont accédés (PC, tablette, smartphone).
… … …
Qu’est-ce qu’un framework ? Le terme framework, issu de la langue anglaise, signifie littéralement « structure ». Dans le Web, un framework est en effet un ensemble de composants organisés de manière à proposer un service technique complet à l’utilisateur. En d’autres termes, un framework est une collection d’outils techniques (HTML, CSS, JavaScript, etc.) simplifiant l’organisation ou la réalisation d’un projet web. Il existe des centaines de frameworks destinés aux langages de programmation web comme PHP. Ces derniers s’adressent très souvent à un public averti et ciblé. Bootstrap est un framework CSS. C’est par la suite que ce dernier a évolué vers des composants HTML et JavaScript qui permettent aujourd’hui d’offrir un service complet répondant parfaitement aux attentes du Web et de ceux qui le font évoluer. Depuis l’arrivée de Bootstrap en tant que service open source, de nouvelles possibilités s’offrent au plus grand nombre d’entre nous. N’importe quel individu est capable de réaliser sans effort particulier son projet web, qui demande pourtant en amont de nombreuses connaissances techniques.
… … …
cheat sheet bootstrap
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 contai¬ner
.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'appl¬iquent sur des <di¬v> et doivent être incluses dans des <di¬v> avec la class "¬row¬", eux-même contenus dans un <di¬v> avec la class "¬con¬tai¬ner¬" ou "¬con¬tai¬ner¬-fl¬uid¬".
Gestion des colonnes - Offsets & Décalages
Classes d'offset Classes de Push Classes de Pull
Marge à gauche Décalage à droite Décalage à gauche
.col-s¬m-o¬ffset-# .col-s¬m-p¬ush-# .col-s¬m-p¬ull-#
.col-m¬d-o¬ffset-# .col-m¬d-p¬ush-# .col-m¬d-p¬ull-#
.col-l¬g-o¬ffset-# .col-l¬g-p¬ush-# .col-l¬g-p¬ull-#
Classes de Visibi¬lités
Ecran Taille de l'écran Affi¬chage Cache
Smart¬phones <767px .visib¬le-xs .hidden-xs
Table¬ttes >768px & <991px .visib¬le-sm .hidden-sm
PC de Bureau >992px & <1199px .visib¬le-md .hidden-md
Ecrans Larges >1200px .visib¬le-lg .hidden-lg
Impre¬ssion .visib¬¬le¬-¬print .hidde¬¬n-¬print
Lecteur d'écran sr-only
Les classes d'affi¬chage (.visi¬ble-*) n'affi¬chent que pour la taille indiquée.
Les classes pour cacher (.hidd¬en-*) affichent sur les autres tailles que celle indiquée.
La classe sr-only peut être combinée avec sr-on-ly-¬foc¬usable 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
.cente¬r-block Centre l'objet HTML comme un block tous
.show Force l'affi¬chage block
.hidden Force la dissim¬ulation block
.invisible Rend invisible tous
.badge Badge aligné à droite <sp¬an>
.initi¬alism Diminue la taille de police <ab¬br>
block, inline et inline¬-block désignent le type d'affi¬chage de l'élément (display css).
Textes & Paragr¬aphes <p> <sp¬an>
.text-¬co¬ntext Couleur contex¬tuelle
(cont¬ext* = primary, success, info, warning ou danger)
.text-¬alig Alignement
(alig = left, center, right, justify ou nowrap)
.text-¬tr¬ans¬form Transf¬orm¬ation de caractère
(tran¬sform = lowercase, uppercase ou capita¬lize)
.text-hide Cacher le texte
(utile pour remplacer un titre par une image)
.bg-c¬ontext Couleur de fond contex¬tuelle
(context = muted, primary, success, info, warning, danger)
.h# Même apparence qu'un titre (# = 1 à 6)
.small Même apparence que <sm¬all>
.lead Paragraphe principal
Images <im¬g>
.img-r¬esp¬onsive Image Responsive
.img-r¬ounded Bords arrondis
.img-c¬ircle Bordure circulaire
.img-t¬hum¬bnail Double Bord
Tableaux <ta¬ble>
.table Style de base (obl.)
.table¬-st¬riped Couleurs alternées
.table¬-bo¬rdered Bordure
.table¬-hover Couleur de la ligne active
.table¬-co¬ndensed Petites lignes
.table¬-re¬spo¬nsive 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 corres¬pondre à 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¬-ho¬vered sur le tableau.
Listes
.list-¬¬un¬s¬tyled Liste sans puces <ul>
.list-¬inline Liste en ligne <ul>
.dl-ho¬¬ri¬z¬ontal Affichage de liste de défini¬tions en tableau <dl>
Formul¬aires
.form-¬inline Formulaire sur une ligne <fo¬rm>
.form-¬hor¬izontal Formulaire avec le <la¬bel> et le <in¬put> sur une ligne <fo¬rm>
.form-¬control Style de base (obl.) textual <in¬put¬>, <te¬xta-rea> & <se¬lec¬t>
.input¬-t¬aille Taille de l'input textual <in¬put¬>, <te¬xta-rea> & <se¬lec¬t>
<*t¬aille : sm ou lg)
.form-¬group Style de base (obl.) pour le <di¬v> incluant le <la¬bel> et son <in¬put> <di¬v>
.form-¬group .has-¬con¬text Contexte de résultat <di¬v>
(context : success, warning, error)
.checkbox Sous-g¬roupe pour les checkbox <di¬v>
.check¬box¬-inline <di¬v>
.radio Sous-g¬roupe pour les radio controls <di¬v>
.radio¬-inline <di¬v>
.input¬-group Permet accoler des div à un <in¬put> pour donner des indica¬tions <di¬v>
.input¬-gr¬oup¬-addon Blocks accolés à l'input <di¬v>
.form-¬con¬tro¬l-s-tatic Valeurs fixes <p>
Liste des composants
Comp¬osant Classe Princi¬pale
Menus droulants .dropdown (& .dropd¬own¬-toggle & ul.dro¬pdo¬wn--menu)
Boutons accollés & Boutons déroulants .btn-group
Barre de navigation .nav
Barre de navigation principale .navbar
Fil d'Ariane .bread¬crumb
Pagination ul.pag¬ination
Labels .label.la¬bel-* (* : contect)
Badges span.badge
A utiliser au sein d'un lien ou d'un bouton
Jumbotron .jumbotron
Entête de page .page-¬header
Vignettes automa¬tiques a.thum¬nails
Code : <a href="#¬" class=¬"¬thu¬mbn¬ail¬"> <img src="..." alt="..."> </a>
Messages d'alerte .alert .alert¬-c¬ontext (context : type de message)
Objets Media .media
Listes en groupe (accolés) .list-¬group
Panneaux .panel
Code embarqué responsive .embed¬-re¬spo¬nsi¬ve-item
Cadre incrusté .well
Boutons
.btn Classe de base (obl.)
.btn-¬con¬text Contexte
(context = d¬efault, s¬uccess, w¬arning, p¬rimary, info, d¬anger)
.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 disabl¬ed=¬"¬dis¬abl¬ed")
S'applique aux balises suivantes :
<bu¬tto¬n>
<a>
<input type='¬sub¬mit¬'>
<input type='¬but¬ton¬'>
Navbar
.navbar
.navba¬r_brand
.navba¬r-c¬ollapse
.navba¬r-t¬oggle
.navba¬r-btn
Labels <sp¬an>
.label <sp¬an>
.label¬-de¬fault <sp¬an>
.label¬-pr¬imary <sp¬an>
.label¬-su¬ccess <sp¬an>
.label¬-info <sp¬an>
.label¬-wa¬rning <sp¬an>
.label¬-danger <sp¬an>
Messages d'alerte
.alert Classe de base (obl.)
.alert¬-c¬ontext Couleur contex¬tuelle
(context = default, success, info, warning, danger)
.alert¬¬-d¬i¬s¬mi¬¬ssable Message refermable
<button type="b¬¬ut¬t¬o¬n" class=¬¬"¬c¬lo¬¬se" data-d¬¬is¬m¬i¬ss¬¬="al¬¬er¬t¬" aria-h¬¬id¬d¬e¬n=¬¬"¬¬tr¬u¬e¬"¬>&¬ti¬-mes¬¬;<¬/¬b¬ut¬¬ton>
<button type="b¬utt¬on" class=¬"¬clo¬se" aria-l¬abe¬l="C¬los¬e"><span aria-h¬idd¬en=¬"¬tru-e">&ti¬mes¬;</¬spa¬n><¬/bu¬tto¬n>
<a href="#¬¬" class=¬¬"¬a¬le¬¬rt-¬¬li¬n¬k¬"¬>...<¬¬/a>
Panels
.panel¬-group
.panel .panel¬-de¬fault
.panel¬-he¬ading
.panel¬-co¬llapse
.panel¬-body
Exemples Codes HTML
Addr¬¬es¬ses
<ad¬¬dr¬e¬s¬s> <st¬¬ro¬n¬g¬>T¬¬witter, Inc.</¬¬st¬r¬o¬ng¬¬><b¬¬r> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<¬¬br> <abbr title=¬¬"¬P¬ho¬¬ne">¬¬P:¬<¬/¬ab¬¬br> (123) 456-7890 </a¬¬dd¬r¬e¬ss>
Glyp¬hic¬ons (## : icône)
<span class=¬¬"¬g¬ly¬¬phicon glyphi¬¬co¬n¬-¬##¬"><¬¬/s¬p¬a¬n>
Flèche de liste déroul¬ante
<span class=¬"¬car¬et">¬</s¬pan>
Abbr¬évi¬ati¬ons
<abbr title=¬¬"¬a¬tt¬¬rib¬¬ut¬e¬"¬¬>at¬¬tr¬<¬/¬ab¬¬br>
Texte surligné
<ma¬rk>¬hig¬hli¬ght¬</m¬ark>
Texte effacé (barré)
<de¬l>d¬eleted text</¬del>
Texte barré
<s>¬str¬icked text</¬s>
Texte inséré (souligné)
<in¬s>added text</¬ins>
Texte souligné
<u>¬und¬erlined text</¬u>
Texte plus petit
<sm¬all¬>small text</¬sma¬ll>
Texte gras
<st¬ron¬g>bold text</¬str¬ong>
Texte italique
<em¬>it¬ali¬cized text</¬em>
<bl¬ock¬quo¬te>
Format de Base
<bl¬¬oc¬k¬q¬uo¬¬te> <p>¬¬Lorem ipsum dolor sit amet, consec¬¬tetur adipiscing elit. Intege¬¬r<¬/-p> </b¬¬lo¬c¬k¬qu¬¬ote>
Format étendu
<bl¬ock¬quo¬te> <p>¬Lorem ipsum dolor sit amet, consec¬tetur adipiscing elit. Integer posuere erat a ante.<¬/p> <fo¬ote¬r>S¬omeone famous in <cite title=¬"¬Source Title">-Source Title<¬/ci¬te>¬</f¬oot¬er> </b¬loc¬kqu¬ote>
Alig¬nement à droite (classe)
.block¬¬qu¬o¬t¬e-¬¬reverse
Affichage de code
<co¬de> fragments de code inline
<kb¬d> affichage d'une touche inline
<pr¬e> Code block
<pre class=¬"¬pre¬-sc¬rol¬lab¬le"> Code block
(avec scroll vertical pour une hauteur >350px)
<va¬r> Variables inline
<sa¬mp> 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 foncti¬onner.