[PDF] Cheat sheet bootstrap 3 pdf | Cours Bootstrap

(1)

Structure d'une page HTML avec Bootstrap <!DOCTYPE html>

<head>

content="width=device- width, initial-scale=1">

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/ css/bootstrap.min.css">

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/ css/bootstrap -theme.min.css">

<title>Bootstrap Page</title>

</head>

<body>

////// Colonnes de la page

</div>

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11 .3/jquery.min.js "></script>

<script

src="https://maxcdn.bootstrapcd n.com/bootstrap/3.3.5/j s/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>

By Alexandre Achain (Weizu)

cheatography.com/weizu/ alexandre.achain.chez.com/

Published 21st June, 2015. Last updated 17th November, 2016. Page 1 of 6.

Sponsored by Readability-Score.com Measure your website readability!

(2)

Classes Helpers (cont)

.initialism Diminue la taille de police <abbr> block, inline et inline-block désignent le type d'affichage de l'élément (display css).

(3)

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-horizo

ntal

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> By Alexandre Achain (Weizu)

(4)

Formulaires (cont)

.input-group Permet accoler des div à un <input> pour donner des indications

<di‐ v>

.input-group-addon

Blocks accolés à l'input <di‐ v>

.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>

(5)

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

Abbréviations

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

(6)

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 http://pikock.github.io/bootstrap-magic/app/#!/editor

Lavish Bootstrap http://www.lavishbootstrap.com/

Boot Theme https://www.boottheme.com/

Bootstrap Designer http://www.bootstrapdesigner.com/

PaintStrap http://paintstrap.com/

JQuery UI Bootstrap Theme

https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme

Bootstrap Hero ($) http://bootstraphero.com/

Les éditeurs payants sont marqués d'un ($)

Ressources de Développement Bootstrap en Français : http://www.oneskyapp.com/fr/docs/bootstrap/getting-started/ http://getbootstrap.com/ https://github.com/twbs/bootlint http://bootsnipp.com/ http://fontawesome.bootstrapcheatsheets.com/ http://glyphicons.bootstrapcheatsheets.com/ Thèmes Gratuits http://bootswatch.com/ http://startbootstrap.com/ http://www.goldbootstrap.com/ Thèmes Payants - Places de Marchés https://wrapbootstrap.com/ https://twittstrap.com/ Forks de Bootstrap 2 https://github.com/danneu/darkstrap https://github.com/phildionne/golden-bootstrap/ https://github.com/aozora/bootmetro Licence