Cours gratuits » Cours informatique » Cours développement web » Cours Bootstrap

Comment utiliser bootstrap

Documents similaires

3 étoiles sur 5 a partir de 2 votes.
Votez ce document: ☆☆☆☆☆★★★★★

BOOTSTRAP

Sommaire .. 1

Bootstrap .. 4

Prérequis . 6

Les framework CSS 6

Utilisation .. 6

Avantages .. 6

Inconvénients . 6

Adapter Bootstrap : LESS 6

Ressources 7

CDN : késako ? .. 8

CDN du fichier css : bootsrapcdn 8

CDN des fichier js : google et bootsrapcdn 8

Exemple 8

Utilité : alternative au CDN .. 9

Download Bootstrap 9

Contenu du téléchargement 9

Contenu du dossier dist 9

Download de plugin jQuery .. 10

Installation du répertoire bootstrap à la racine 10

Regarder le code des classes bootstrap 10

Edition : novembre 2016

• Framework CSS, stylé et responsive.

• Créé par les développeurs de Twitter

• Basé sur HTML 5 et CSS3.

• Embarque des plugins JQuery de qualité

• Comporte un système de grille simple et efficace pour mettre en ordre l'aspect visuel d'une page web

• Apporte du style pour les boutons, les formulaires, la navigation…

• Propose des templates de mises en page

• Permet de concevoir un site web rapidement et avec peu de lignes de code ajoutées.

Télécharger Bootstrap :

Les plugins JQuery ne sont pas installés en standard dans bootstrap. Ils se récupèrent ici :

. Installer les plugins dans le dossier js.

Installer le dossier bootstrap avec ses 3 dossiers css, fonts et js à la racine du site.

Pour utiliser bootstrap dans un fichier HTML :

Ø Dans le head, on linke un fichier .css

Ø Dans le body, on linke 2 fichiers .js (bootstrap utilise jquery)

Ø Simple reprise des balises HTML : <h1>

Ø Boutons améliorés : <button type="button" class="btn btn-primary">

Ø Système de pagination : <ul class="pagination">

Ø Système de « collapse : <div id="demo" class="collapse"> Ø etc.

<div class="row"> <div class="col-sm-4"> etc.

Ø Tuto complet de la grille :

HTML-CSS

Il en existe beaucoup : Elasticss, Knacss, Blueprint, unsemantic, YUI, 52Framework, BlueTrip, ez-css, Pure, Gumby, etc.

Foundation : très avancé

Bootstrap : très avancé et très populaire

• Simple : s’utilise en linkant un fichier contenant les classes définies par bootstrap.

• Ensuite on peut ajouter ces classes aux balises HTML pour obtenir des résultats stylés et responsives.

• Bootstrap propose une bonne documentation :

• Il y a beaucoup de ressources sur le web :

• Bootstrap garantit une évolution permanente.

Abstraction des navigateurs qui réagiront tous pareil grâce au : petit fichier CSS qui établit des règles pour avoir un rendu identique quel que soit le navigateur utilisé.

Abstraction des écrans (responsive design)

Permet de concevoir un site web stylé rapidement : structures déjà présentes, style homogène, grille de positionnement (12 colonnes chez Bootstrap), éléments stylés (bouton, barre de navigation, …), etc.

Normalisation du graphisme : tous les sites se ressemblent !

Mais Bootstrap est configurable avec LESS.

Pour adapter Bootstrap, on utilise LESS qui étend le CSS avec un comportement dynamique, utilisant des variables, des classes abstraites, des opérations et des fonctions. LESS fonctionne aussi bien côté client (les navigateurs) que côté serveur, avec .

Site :

Blog :

Github :

CDN : Content Delivery Network : serveur qui fournit les services.

Le CDN va nous permettre de ne rien installer et de récupérer les fichiers directement sur un serveur !

Du coup, il n’y a aucune installation à faire !

Le site bootstrapcdn fournit les fichiers bootstrap .css et .js :

Google fournit les fichiers jquery .js :

Bootstrapcdn pour le :

<link

href=" " rel="stylesheet">

Bootstrapcdn pour le :

Google pour :

<script

src=""> </script> <script

src=" "></script>

?filename=trybs_temp_blog&stacked=h

Pour pouvoir faire ses tests sans réseau et avoir une version contrôlée de BS et JS, on peut faire une installation sur sa machine.

Le chapitre présente les étapes de l’installation.

• "Download Bootstrap" : permet de récupérer les fichiers nécessaires au fonctionnement de Bootstrap. C’est suffisant pour utiliser bootstrap.

• "Download source" : permet de récupérer en plus tous les fichiers sources.

• "Download Sass" : c'est un portage de Bootstrap en Sass pour les utilisateurs de projets qui utilisent Sass (Rails, Compass ).

Si on télécharge seulement Bootstrap :

on obtient un répertoire « dist » avec 3 sous-répertoires :

• dist/css

• dist/fonts

• dist/js.

Si on télécharge les sources : on a un dossier avec plusieurs fichiers et dossiers. Le seul dossier utile est le dossier dist.

Il contient les fichiers suivants :

• : il comporte les classes de base de Bootstrap

• : il contient des règles de styles particulières pour créer un thème spécifique pour Bootstrap

• Les versions min : ce sont les versions de production : le code est sur une ligne pour ne pas prendre toute la place. Les versions non min permettent de naviguer dans le code.

• Les fichiers map : et permettent de retrouver l'emplacement original d'une ligne de code à partir du code « min ». Cette fonctionnalité est utilisable avec les dernières versions de Chrome et Firefox. Ces fichiers ne sont pas indispensables au fonctionnement.

Le répertoire contient des icônes à différents formats : svg, ttf, woff, eot

• Il contient les fichiers et ne sont utiles que si on utilise des plugins jQuery

• contient le code JavaScript des composants de Bootstrap.

• Les versions min sont les versions de production : le code est sur une ligne pour ne pas prendre toute la place.

Les plugins JQuery ne sont pas installés en standard dans bootstrap.

Ils se récupèrent ici :

Attention, il faut une version < 3 pour que ça marche avec bootstrap (2016) !!!

On trouve ça ici : Il faut les placer dans le dossier js.

A la racine du site, on crée un répertoire bootsrap et on met dedans les 3 sous-répertoires css, fonts et js

On a besoin uniquement de : , le dossier fonts, ,

On ajoute , le dossier fonts, , pour pouvoir consulter le fichiers source.

Pour comprendre ce que fait une classe bootstrap, on peut toujours aller regarder le code dans le fichier .

Ø Fichier css

<head>

…

Ø Fichiers js

Les fichiers javascript se chargeront ainsi :

Linker le fichier bootstrap.

Cas particuliers :

• IE

• Mobile

• IE < 9

Principes :

La page affiche un simple Hello World.

Elle linke le fichier dans le <head> Elle linke

<head>

<title>Bootstrap template</title>

<!—link de bootstrap : -->

<!--[if lt IE 9]>

<script

src=""></s cript> <script

src=""></scrip t>

<![endif]-->

</head>

2 fichiers à charger pour le JavaScript :

• le fichier bootstrap

• une api jquery de google

Dans une balise <script>, juste avant le </body>, on met les références aux fichiers .js :

<script

src=" "></script>

La grille est une division de la page en 12 colonnes qui ont toutes la même largeur.

La largeur des colonnes s’adapte à la largeur de la fenêtre.

Pour les ligne, la taille s’adapte à ce qu’on met dedans. C’est du HTML classique : la hauteur d’une cellule sera fonction de ce qu’on mettre dedans.

Ici dans les colonnes 3, 6 et 11, la hauteur du bloc s’adapte au texte.

class=row

class=col-XX-*

XX : xs, sm, md ou lg. Ce sont les formats qui modifient le comportement.

* : de 1 à 12 exemples :

col-xs-1 pour un élément de 1 colonne col-md-8 pour un élément de 8 colonnes

Ø Principes

1. La grille doit être contenu dans un container ou container-fluid.

2. contenair et container-fluid sont des blocs de regroupement de balises.

3. Le contenair laisse une marge à droite et à gauche.

4. Le contenair-fluid s’étale sur toute la fenêtre.

Ø Affichage

Ici on affiche un bloc de 4 et un bloc de 8.

Le bloc de 4 contient beaucoup de texte.

Ø Test

Ø HTML

<p>

Bloc de 4<br>

Bla bla bla

</p>

</div>

<p>

Bloc de 8

</p>

</div>

Ø Structure HTML

Un div « container-fluid » qui contient nos blocs bootstrap.

Un div pour la ligne : row

Dans la ligne : un div par colonne : une colonne de 4 et une colonne de 8.

Ø CSS

.row{ /* toutes les lignes */ text-align: center;

line-height: 40px; /* hauteur de la ligne */

}

[class*="col-"] { /* tous les attributs class = à %col-% */ border: 1px solid black;

border-radius: 6px; /* angles arrondis */

}

[class*="-4"] { /* tous les attributs class = à %-4% */ background-color: aqua;

}

.row : on contrôle la ligne en général : texte centré, etc.

[class*="col-"] : on contrôle toutes les colonnes.

[class*="-4"] : on contrôle les colonnes de largeur 4

Ø Rappels de syntaxe CSS :

Poly « Bases du CSS », paragraphe « Syntaxe CSS : construction des sélecteurs » :

[ ] : cible un attribut de n’importe quel sélecteur (balise).

[class] cible l’attribut « class »

[class*="-4"] : cible les attributs class = %-4% (le nom de la class contient « -4 »).

Ø Affichage

On affiche un bloc de 4 et un bloc de 6. Il reste 2 colonnes qui ne sont pas dans un bloc.

On peut mettre du texte dans ces deux colonnes : il est sur la ligne (dans le div « row »)

Si on met beaucoup de texte, on voit que les blocs sont gérés comme des « float » : le texte qu’on entoure les blocs précédents.

Comportement « float » des blocs :

bla bla bla bla

bla bla bl

a bla bla bla bla bla bla bla bla bla bla bla bla bla bla

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Ø Test

Les formats des colonnes définissent un comportement en fonction de la taille de l’écran.

Les blocs vont s’empiler ou pas en fonction de la taille de l’écran et du format xs, sm, md ou lg.

Le choix du format définit le « empilé si taille < au format ».

• col-xs-* : x small (smartphone) : toujours aligné

• col-sm-* : small (tablette): aligné si >= 768 px, empilé sinon (empilé si smartphone).

• col-md-* : medium (ordinateur portable) : aligné si >=992 px, empilé sinon (empilé si tablette).

• col-lg-* : large (écran fixe) : aligné si >=1200 px, empilé sinon (empilé si portable).

Ø Principes

On présente quatre lignes (row) avec deux colonnes dans chaque ligne : de 4 et de 8.

Ces colonnes seront xs, sm, md ou lg.

Leur comportement sera donc différent selon la taille de l’écran.

Les colonnes lg sont les première à s’empliler quand l’écran diminue.

Les colonnes xs ne s’empileront jamais.

A noter que quand on empile, les deux blocs (de 4 et de 8) ont alors la même largeur.

Ø Test


ml

Ø HTML

<div class="col-xs-4">Largeur xs 4</div>

<div class="col-xs-8">Largeur xs 8 - toujours aligné</div> </div>

<div class="col-sm-4">Largeur sm 4</div>

<div class="col-sm-8">Largeur sm 8 - aligné si >= 768 px</div>

</div>

<div class="col-md-4">Largeur md 4</div>

<div class="col-md-8">Largeur md 8 - aligné si >= 992 px</div> </div>

<div class="col-lg-4">Largeur lg 4</div>

<div class="col-lg-8">Largeur lg 8 - aligné si >=1200 px 8</div>

</div>

function myFunction() {

document.getElementById("largeur").innerHTML = "Largeur de la fenêtre: " + window.innerWidth;

}

</script>

</body>

Ø CSS

.row{ /* toutes les lignes */ text-align: center;

line-height: 40px; /* hauteur de la ligne */

}

[class*="-4"] { /* tous les attributs class = à %-4% */ background-color: aqua;

}

[class*="-8"] { /* tous les attributs class = à %-8% */ background-color: pink;

}

[class*="col-"] { /* tous les attributs class = à %col-% */ border: 1px solid black;

border-radius: 6px; /* angles arrondis */ }

Ø Remarque JavaScript

On définit une fonction javascript qui affiche la largeur de l’écran en pixel et le type d’écran (smartphone, tablette, ordi portable, ordi fixe).

Cette fonction met à jour la page HTML avec un « innerHTML » (gestion du DOM).

Elle est appelée par un « onload » et un « onresize » dans le <body> (gestion d’événement).

Ø Remarque

Il faut que les deux colonnes aient le même format (lg dans col-lg-4 et col-lg-8 par exemple) sinon on obtient un comportement étrange.

Ø Exemple :

<div class="col-lg-2">2 colonnes</div>

<div class="col-lg-3">3 colonnes</div>

<div class="col-lg-6">6 colonnes</div>

</div>

<div class="col-lg-12">12 colonnes</div>

</div>

<div class="col-lg-4">4 colonnes</div>

<div class="col-lg-8">8 colonnes</div> </div>

Ø Syntaxeclass="col-XX-offset-*"

Ø Exemple :

<div class="col-lg-3">3 colonnes</div>

<div class="col-lg-6">6 colonnes</div>

<div class="col-lg-3">3 colonnes</div>

</div>

<div class="col-lg-3">3 colonnes</div>

<div class="col-lg-offset-6 col-lg-3">3 colonnes</div> </div>

Ø Principes

Une première ligne indépendante de 12 colonnes

Une deuxième ligne avec 8 et 4 colonnes

Dans le bloc de 8 colonnes, un 3^ème ligne avec 4 colonnes et 6 colonnes avec un offset de 2

Dans ce bloc de 6 colonnes, une 4^ème ligne avec 3 colonnes et 1 offet de 1, 5 colonnes et un offet de 1

Ø Test

Ø Syntaxe

class="col-XX-push-*" : décaler vers la droite, à partir de sa position « normale » class="col-XX-pull-*" : décaler vers la gauche, à partir de sa position « normale »

A noter que le comportement est complexe à analyser du fait d’un décalage à partir de la position « normale ».

Ø Exemple :

Principes

Colonne 1 est poussée à droite de 8 à partir de 0 (du bord)

Colonne 2 est poussée à droite de 3 à partir de sa position « normale » qui serait juste après colonne 1 si celui ci n’avait pas été poussé : donc, à partir de 2 : il démarre en 5.

Colonne 3 est poussée à gauche de 2 à partir de sa position « normale » qui serait juste après colonne 2 si colonne 1 et 2 n’avait pas été poussée : donc à partir de 4 : il démarre en 2

Ø Test

Ø Code

<div class="col-lg-2 col-lg-push-8">Colonne 1</div>

<div class="col-lg-2 col-lg-push-3">Colonne 2</div>

<div class="col-lg-2 col-lg-pull-2">Colonne 3</div>

</div>

Le header est une ligne (row), sur 12 colonnes. Idem pour le footer.

On définit une ligne (row) qui contiendra le menu (nav) sur 2 colonnes, et la section sur 10 colonnes.

Dans la section, on définit une ligne qui contient l’article sur 10 colonnes, et div pour les asides de 2 colonnes.

Dans le div des asides, on place les aside, sur 12 colonnes chacun.

Pour le footer, on choisit de ne pas mettre de ligne, mais de le placer sur 12 colonnes.

Entete

</div>

</header>

</nav>

Section

Article

</article>

<div class="col-sm-2"> les asides

Aside 1

</aside>

Aside 2

</aside>

</div>

</div>

</section>

</div>

Pied de page

</footer></footer>

Comme le précédent mais avec 2 plusieurs sections.

Ø Fixe et portable : lg et md

Ø Tablette : sm

Aside 3, 4 empilés

Ø Smartphone : sm Tout empilé.

Aside 3,4 cachés

http://b

Ø Syntaxe

Ø Définition du comportement selon la taille de la fenêtre

Plutôt que d’avoir une simple définition de colonnes par bloc comme :

On va définir plusieurs comportements selon la taille de la fenêtre :

Avec cette définition, on a un affichage sur 2 colonnes sur fixe et portable (col-md-2), sur 3 colonnes sur tablette (col-sm-3) et sur 4 colonnes sur smartphone (col-xs-4).

Ø Solution

On a 3 « row » : header, asides et section, footer

Les row header et footer s’étalent sur 12 colonnes.

La row avec l’aside gauche (1,2), la section et l’aside droite (3,4) est divisée en 3 blocs avec leurs nombres de colonnes.

Ce nombre de colonnes est fonction de la taille de l’écran.

<!—- affichages des aside 1,2 - section - aside 3,4 lg, md : sm2 - md8 - md2 sm : sm2 - sm10 – 12(empilé)

xs : 12(empilé) – 12(empilé) – hidden(caché)

-->

<div class=" col-sm-2" > aside

<div class="hidden_xs col-md-2" > aside

</div>

Ø Ordinateur : lg et md

Aside 1,2 sur 2 colonnes, Section sur 8 colonnes, Aside 3,4 sur 2 colonnes.

Ø Tablette : sm

Aside 3, 4 empilés

Comme il y a un « float » entre aside 1, 2 et section, l’aside 3,4 se place mal et recouvre les blocs aside1,2 et section.

On doit réinitialiser les float avec un div vide en class clearfix et visible-sm-block visible-sm-block : ne s’affiche qu’au format tablette

.clearfix:after { clear: both;}

Ø Smartphone : sm

Pour cacher les Aside 3,4 :

Avec des petites photos, il faut faire attention à ce que, quand on empile, elles ne deviennent pas grandes… et floues !


s.html

On affiche une photo sur 2 colonnes.

On aura 6 photos sur une ligne (6*2=12 colonnes).

Mais dès que la fenêtre passe sous 1200 pixels de large, les photos s’empilent en pleine largeur. Elles risquent d’être floues !

Ø Définition du comportement selon la taille de la fenêtre

Plutôt que d’avoir une simple définition de colonnes par bloc comme :

On va définir plusieurs comportements selon la taille de la fenêtre :

Avec cette définition, on a un affichage sur 2 colonnes sur fixe et portable (col-md-2), sur 3 colonnes sur tablette (col-sm-3) et sur 4 colonnes sur smartphone (col-xs-4).

Ø La solution : contrôler le nombre de photos affichées pour chaque écran

</div>

On affiche une photo sur 2 colonnes, donc 6 photos par ligne pour un ordinateur portable et un écran fixe.

Quand on passe à un smartphone, on affiche sur 4 colonnes donc 3 photos par ligne.

Quand on passe sur une tablette, on affiche sur 3 colonnes donc 4 photos par ligne.

Jumbotron :

Badge et label :

Site générateur de formulaire (voir la vue HTML) :

Site générateur de bouton : autre site :

Site de glyphicons : autre site d’icone

Exemple de pagination avec Jquery et Javascript :

Ø Exemple :

Pour mettre une photo ou une vidéo callée à droite ou à gauche avec du texte.

Chemin de naviagation : breadcrump

Cours gratuits » Cours informatique » Cours développement web » Cours Bootstrap

Comment utiliser bootstrap

Articles similaires

Documents similaires

Bootstrap glyphicons list [Eng]

Bootstrap open classroom

Bootstrap 4 tutorial français

Bootstrap 3 tutorial français

Bootstrap all class list

Apprendre le bootstrap cours avancé

Bootstrap offline documentation [Eng]

Bootstrap tutorial w3schools [Eng]

Cheat sheet bootstrap 3

Bootstrap framework tutorial pour débutant

Apprendre bootstrap 4 documentation

Bootstrap tutorial francais