Cheat sheet bootstrap 3 pdf

Problème à signaler:

Télécharger



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

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 fonct

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


5