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
Bootstrap Page
////// Colonnes de la page
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 et doivent être incluses dans des avec la class "¬row¬", eux-même contenus dans un 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
Table¬ttes >768px &
PC de Bureau >992px &
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
.initi¬alism Diminue la taille de police
block, inline et inline¬-block désignent le type d'affi¬chage de l'élément (display css).
Textes & Paragr¬aphes
.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
.lead Paragraphe principal
Images
.img-r¬esp¬onsive Image Responsive
.img-r¬ounded Bords arrondis
.img-c¬ircle Bordure circulaire
.img-t¬hum¬bnail Double Bord
Tableaux
.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
La classe .table est nécessaire pour utiliser l'une des autres classes.
Contexte de colonnes ou lignes .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 .list-¬inline Liste en ligne .dl-ho¬¬ri¬z¬ontal Affichage de liste de défini¬tions en tableau Formul¬aires .form-¬inline Formulaire sur une ligne .form-¬hor¬izontal Formulaire avec le et le sur une ligne .form-¬control Style de base (obl.) textual , & .input¬-t¬aille Taille de l'input textual , & .form-¬group Style de base (obl.) pour le incluant le et son .form-¬group .has-¬con¬text Contexte de résultat (context : success, warning, error) .checkbox Sous-g¬roupe pour les checkbox .check¬box¬-inline .radio Sous-g¬roupe pour les radio controls .radio¬-inline .input¬-group Permet accoler des div à un pour donner des indica¬tions .input¬-gr¬oup¬-addon Blocks accolés à l'input .form-¬con¬tro¬l-s-tatic Valeurs fixes 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 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 : Navbar .navbar .navba¬r_brand .navba¬r-c¬ollapse .navba¬r-t¬oggle .navba¬r-btn Labels .label .label¬-de¬fault .label¬-pr¬imary .label¬-su¬ccess .label¬-info .label¬-wa¬rning .label¬-danger 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 &¬ti¬-mes¬¬; &ti¬mes¬;¬spa¬n> Panels .panel¬-group .panel .panel¬-de¬fault .panel¬-he¬ading .panel¬-co¬llapse .panel¬-body Exemples Codes HTML Addr¬¬es¬ses T¬¬witter, Inc.¬¬st¬r¬o¬ng¬¬> 795 Folsom Ave, Suite 600 Glyp¬hic¬ons (## : icône) Flèche de liste déroul¬ante ¬¬pan> Abbr¬évi¬ati¬ons at¬¬tr¬ Texte surligné ¬hig¬hli¬ght¬¬ark> Texte effacé (barré) d¬eleted text¬del> Texte barré Texte inséré (souligné) added text¬ins> Texte souligné ¬und¬erlined text¬u> Texte plus petit small text¬sma¬ll> Texte gras bold text¬str¬ong> Texte italique it¬ali¬cized text¬em> Format de Base ¬¬Lorem ipsum dolor sit amet, consec¬¬tetur adipiscing elit. Intege¬¬r ¬¬lo¬c¬k¬qu¬¬ote> Format étendu ¬Lorem ipsum dolor sit amet, consec¬tetur adipiscing elit. Integer posuere erat a ante. S¬omeone famous in -Source Title¬¬oot¬er> ¬loc¬kqu¬ote> Alig¬nement à droite (classe) .block¬¬qu¬o¬t¬e-¬¬reverse Affichage de code fragments de code inline affichage d'une touche inline Code block Code block (avec scroll vertical pour une hauteur >350px) Variables inline 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.
San Francisco, CA 94107 ¬¬P:¬ (123) 456-7890 ¬¬dd¬r¬e¬ss> ¬str¬icked text¬s>