Bootstrap framework pdf


Télécharger Bootstrap framework pdf

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

Télécharger aussi :


                                                              RETROUVEZ L’INTÉGRALITÉ DES COURS SUR

Bootstrap

   

Un framework est avant tout un cadre de travail permettant de faire profiter aux développeurs d'une arborescence et d'une architecture communes.

Le plus souvent cela se présente sous forme de dossier pour faciliter l'organisation du code et simplifier la maintenance dans le temps.

Un framework peut aussi apporter un socle de fonctionnalités par défaut.

Qu'est-ce qu'on obtient concrétement lorsqu'on télécharge bootstrap ? juste un dossier contenant quelques fichiers css et js.

 

Avec Bootstrap, vous gagnerez du temps et n'aurez plus besoin de vous prendre la tête sur un décalage de quelques pixels sur votre

page web. Tout le CSS a déjà été pensé pour vous.

Plus généralement, nous pouvons dire que c'est un rassemblement de différents morceaux de code utiles à la création d'une page web, aussi bien dans la mise en forme CSS que dans l'animation et l'interactivité du contenu JavaScript.

 

Bootstrap a été écrit par deux développeurs Twitter pour répondre à des problématiques communes et gagner du temps dans la mise en forme des pages web.

Mark Otto et Jacob Thornton ont écrit bootstrap aux alentours de l'année 2010 puisque le projet a été rendu OpenSource en 2011.

Cela permet notamment de ne pas devoir recommencer toute l'écriture du code de zéro à chaque nouvelle page web.

 

« Bootstrap, j'en entends parler partout, okay mais quel est son intérêt ? je suis très bien sans lui, pourquoi je devrai l'utiliser ? »

Selon moi, les principaux avantages de bootstrap sont :

1.  Responsive : Vous obtiendrez un site web responsive de base, ce qui n'est pas négligeable, cela est même indispensable de nos jours avec les smartphones et tablette !

2.  Un site web jolie : Il existe plusieurs thèmes préfaits de haute qualité et une multitude de classes css que l'on peut utiliser !

3.  Un gain de temps : Vous ne vous occupez quasiment plus que d'écrire le code Html et d'appeler des classes CSS pré-existantes. Il devient très rapide de monter la mise en forme d'une page web.

4.  Compatibilité : A priori, la présentation visuelle sera la même sur tous les navigateurs.

5.  Graphisme : Lorsqu'on développe en programmation, cela nous permet d'avoir une apparence de site sans écrire une seule ligne de CSS (à l'origine, bootstrap a justement été créé pour simplifier le travail de présentation visuelle aux développeurs côté back). Cela est une aubaine pour les développeurs qui préfèrent la partie fonctionnelle à la partie graphique

Naturellement, cette liste n'est pas exhaustive, il y a d'autres avantages, comme notamment l'intégration de plugin jquery, ce qui permet de gagner également du temps sur la partie JavaScript.

   

Il n'y a pas de réel inconvénient à travailler avec bootstrap car il s'agit avant tout d'un choix.

Certains vous diront que bootstrap (framework, jquery (librairie) ne sont pas des langages et viennent ralentir les temps d'exécution du site au niveau des performances.

Même s'il l'on mimifie (coller le code sur 1 seule ligne) le code, ces personnes n'ont pas forcément tort mais par rapport à tout ce que cela apporte, il faut peser le pour et le contre, cela dépend du projet et du développeur.

Par exemple : est-on prêt a sacrifier un peu de performance contre un gain de temps lors de la création du code ?

L'apprentissage prend un peu de temps, mais ça, c'est comme tout le reste, il ne s'agit donc pas d'un inconvénient ! Apprendre c'est la vie du développeur

!

 

Vous l'aurez compris, bootstrap apporte plusieurs choses.

Avant tout : une feuille de style CSS contenant des propriétés et valeur de base pour tous les éléments HTML.

Cela permet de bénéficier d'un graphisme standardisé pour tous les types d'éléments habituels d'un site à un autre : icônes, liens, listes, tableaux, formulaires, etc.

 

Bootstrap est régulièrement mis à jour, vous pourrez donc suivre les dernières actualités sur GitHub ou sur le .

 

Pour se servir de bootstrap, il faut avant tout le télécharger.

Nous allons donc nous rendre sur le .

   

Lorsque vous télécharger Bootstrap, cela se présente sous cette forme :

 

Un dossier css pour la mise en forme.

Un dossier js pour l'animation / interactivité. Un dossier fonts pour les polices / icones.

Le mot clé "dist" indique qu'il s'agit d'une distribution. Ce terme est utilisé régulièrement en Informatique.

 

représente le fichier principal de bootstrap avec la déclaration de toutes les classes CSS ce fichier permet de retrouver la position d'une ligne de code dans la version normale à partir du code minifié Même contenu que le fichier de manière mimifié (tout le code sur une ligne pour gagner en performances). représente le fichier de bootstrap permettant de créer des thèmes spécifiques ce fichier permet de retrouver la position d'une ligne de code dans la version normale à partir du code minifié

Même contenu que le fichier de manière mimifiée (tout le code sur une ligne pour gagner en performances).

icône au format EOT icône au format SVG icône au format TTF icône au format WOFF glyphicons-halflings-regular.woff2 icône au format WOFF2

   

Pour créer votre page web avec bootstrap vous n'êtes pas obligé de garder le nom d'origine et pouvez renommer le dossier /bootstrap-3.3.4-dist/ en /monsite/.

Ensuite, vous pouvez créer votre page web à la racine, par exemple : (index correspond au nom de la page d'accueil).

 

Voici le code Html à prévoir pour notre page d'accueil :

?

<!Doctype html>

<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

        <meta name="viewport" content="width=device-width, initial-scale=1">     </head>

<body>

</body>

</html>

Et nous voilà relié à bootstrap en seulement 1 ligne ! (si cela ne fonctionne pas, pensez à bien revoir le chemin du fichier).

Nous ajoutons également un lien vers une feuille de style CSS pour pouvoir agir à tout moment sur le code CSS.

Il sera donc important de créer le fichier correspondant dans le dossier /css/ à côté des fichiers de bootstrap, tout comme nous l'aurions fait si nous n'étions pas accompagnés de bootstrap !

Concernant la ligne viewport, on demande que l'affichage occupe tout l'espace disponible avec une taille de 1, autrement dit sans zoom. L'attribut « viewport » permet de préciser au navigateur quelle taille il doit prendre pour afficher une page web.

width=device-width permet de régler la largeur de la page web sur la largeur de la fenêtre de l'appareil qui consulte actuellement la page initial-scale=1 permet de régler le niveau de zoom sur 100 % (par défaut).

Si vous souhaitez incorporer la partie JavaScript, vous aurez besoin de quelques lignes complémentaires :

?

<!Doctype html>

<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

<script src=""></script>

<script src=""></script>

        <meta name="viewport" content="width=device-width, initial-scale=1">     </head>

<body>

</body>

</html>

Vous devez donc forcément intégrer la librairie jquery avant le fichier (car se sert de JQUERY) sinon vous aurez une belle erreur exception dans votre console JavaScript.

Et maintenant ?

 

Ca fonctionne ? Si vous avez pu utiliser une classe CSS, vous pourrez utiliser toutes les autres !

Soyez curieux ! Essayer d'autres icônes avec les classes CSS glyphicons.

Vous n'avez presque plus besoin de moi ! Sauf qu'avant de vous lacher dans la nature, il faut absolument que je vous parle de la base de bootstrap : le système de grille à 12 colonnes.

Système de grille

 

11                                                            Apprendre Bootstrap et le système de grille 12 colonnes !

Bootstrap repose sur un système de grille à 12 colonnes. C'est l'un de ses fondements et on ne peut pas prétendre maitriser Bootstrap sans connaitre ce concept de base.

Nous allons avoir besoin de faire des tests pour l'expliquer. Je vous propose donc qu'à la racine de notre installation Bootstrap, nous allons créer un fichier nommé .

Voici la base à conserver tout le long de notre tuto :

?

<!Doctype html>

<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

        <meta name="viewport" content="width=device-width, initial-scale=1">     </head>

<body>

</body>

</html>

Nous préparons quelques bordures dans notre fichier pour plus tard voir nos zones apparaitre :

?

.container{ border: 1px solid; }

.bordureRouge{ border: 3px solid red; padding: 10px; }

.bordureVerte{ border: 3px solid green; padding: 10px; }

.bordureBleue{ border: 3px solid blue; padding: 10px; }

.bordureJaune{ border: 3px solid yellow; padding: 10px; }

.bordureOrange{ border: 3px solid orange; padding: 10px; }

C'est dans notre fichier personnel que nous mettrons notre propre code, nous ne modifierons pas le fichier , cela ne se fait pas dans les usages et d'autre part si l'on devait mettre à jour le fichier, cela ferait sauter nos modifications !

Bootstrap est donc avant tout un système de grille comportant 12 colonnes.

En général on centre son contenu sur la page web, cela se fait via la classe CSS Bootstrap .container. Une fois à l'intérieur de cette zone .container nous disposons de 12 emplacements.

Pour se l'imaginer, voici ce que cela donne en théorie :

 

Il faut donc voir cette grille comme des emplacements disponibles sur notre page web ! C'est bien une grille, et nous pouvons prendre de la place à l'intérieur d'elle :

 

Pour prendre 1 place dans cette grille, nous pourrons utiliser la classe CSS (prédéfinie par bootstrap) .col-md-1 Voici maintenant ce que cela donne en pratique avec le code :

?

<!Doctype html>

<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

        <meta name="viewport" content="width=device-width, initial-scale=1">     </head>

<body>

<div class="container">

<div class="row">

<div class="col-md-1">

</div>

</div>

</div>

</body>

</html>

Si vous faites des tests, l'idéal serait d'ajouter une classe CSS supplémentaire pour personnaliser l'affichage, je vous invite à donner une couleur de fond ou mieux : une couleur de bordure. Exemple ci-dessous :

 

?

<!Doctype html>

<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

 

<link rel="stylesheet" href="">

        <meta name="viewport" content="width=device-width, initial-scale=1">     </head>

<body>

<div class="container">

<div class="row">

<div class="col-md-1 bordureRouge">

</div>

</div>

</div>

</body>

</html>

Décryptons ce code :

La classe container

La classe .container prédéfinie dans la feuille de style (à laquelle nous sommes reliés) permet d'englober le reste de notre code et de le centrer sur la page web.

La classe row

La classe .row prédéfinie dans la feuille de style (à laquelle nous sommes reliés) permet de prendre une ligne dans notre grille :

 

La classe col : col-md-1 col veut dire colonne.

Ce mot sera invariable dans bootstrap

md veut dire middle.

Les lettres correspondent au comportement des emplacements. nous le verrons un peu plus en détail plus bas dans ce tutorial.

Ce mot variable pourra prendre les valeurs suivantes : xs, sm, md, lg

1 veut dire 1 emplacement

Les chiffres expriment le nombre d'emplacements. nous le verrons également un peu plus en détail plus bas dans ce tutorial.

Cette partie variable pourra prendre les valeures suivantes : 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 Si nous avions voulu prendre 2 emplacements, nous aurions pu le préciser de la sorte :

?

<!Doctype html>

<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

        <meta name="viewport" content="width=device-width, initial-scale=1">     </head>

<body>

<div class="container">

<div class="row">

<div class="col-md-2 bordureRouge">

</div>

</div>

</div>

</body>

</html>

col-md-2 correspond donc à 2 emplacements

Résultat



 

Allons plus loin avec ce schéma :

 

Si vous pensez avoir compris le principe et que souhaitez faire la suite en exercice pour vous entrainer, a vous de coder ! vous n'êtes pas obligé de regarder le code ci-dessous :

?

<!Doctype html>

<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

        <meta name="viewport" content="width=device-width, initial-scale=1">     </head>

<body>

<div class="container">

<div class="row"> <!-- exemple - ligne 1 -->

<div class="col-md-10 col-md-offset-1 bordureRouge"></div>

</div>

<div class="row"> <!-- exemple - ligne 2 -->

<div class="col-md-6 col-md-offset-3 bordureVerte"></div>

</div>

<div class="row"> <!-- exercice - ligne 3 -->

<div class="col-md-2 col-md-offset-5 bordureBleue"></div>

</div>

<div class="row"> <!-- exercice - ligne 4 -->

<div class="col-md-3 bordureRouge"></div>

<div class="col-md-3 bordureVerte"></div>

<div class="col-md-3 bordureJaune"></div>

<div class="col-md-3 bordureOrange"></div>

</div>

<div class="row"> <!-- exercice - ligne 5 -->

<div class="col-md-12 bordureBleue"></div>

</div>

<div class="row"> <!-- exercice - ligne 6 -->

                <div class="col-md-5 col-md-offset-2 bordureRouge"></div>                 <div class="col-md-3 col-md-offset-2 bordureVerte"></div>

</div>

</div>

</body>

</html>

Le Résultat

 

Quelques explications :

3ème ligne

La classe .row permet de créer une nouvelle ligne.

La classe .col-md-2 permet de créer un nouvel espace qui prend 2 places (sur les 12 possibles).

La classe .col-md-offset-5 permet de créer une marge à gauche de 5 places.

Nous avons donc une zone s'étalant sur 2 emplacements centrés avec 5 emplacements à gauche et 5 à droite de marge (ce qui fait bien 12 au total).

La classe .bordureBleue permet de simplement de voir apparaitre notre zone à l'écran entourée de bleu.

4ème ligne

La classe .row permet de créer une nouvelle ligne.

La classe .col-md-3 permet de créer un nouvel espace qui prend 3 places (sur les 12 possibles).

Nous avons donc 4 zones s'étalant sur 3 emplacements chacun et sans aucune marge entre eux (ce qui fait bien 12 au total). Les bordures permettent simplement de voir apparaitre nos zones à l'écran entourées de couleur.

5ème ligne

La classe .row permet de créer une nouvelle ligne.

La classe .col-md-12 permet de créer un nouvel espace qui prend 12 places (sur les 12 possibles).

Nous avons donc une seule zone s'étalant sur 12 emplacements centrés et sans aucune marge entre eux (ce qui fait bien 12 au total).

La classe .bordureBleue permet de simplement de voir apparaitre notre zone à l'écran entourée de bleu.

6ème ligne

La classe .row permet de créer une nouvelle ligne.

La classe .col-md-5 permet de créer un nouvel espace qui prend 5 places (sur les 12 possibles).

La classe .col-md-3 permet de créer un nouvel espace qui prend 3 places (sur les 12 possibles).

La classe .col-md-offset-2 permet de créer une marge à gauche de 2 places.

Nous avons donc 2 zones s'étalant respectivement sur 5 et 3 emplacements (ce qui fait 8 places) et 2 emplacements de marge chacun (x2) (ce qui fait bien 12 au total).

Les bordures permettent simplement de voir apparaitre nos zones à l'écran entourées de couleur.

Bon, on pourrait continuer longtemps ainsi mais si vous lisez attentivement ce passage je pense que vous comprendrez aisément ce principe !

Par conséquent, plus besoin de float: left; pour mettre 2 zones côte à côte dans bootstrap ! C'est plus simple et aussi plus souple.

 

Revenons tout de même sur un point : les tailles et comportements d'emplacements (à ne pas confondre avec le nombre d'emplacements !).

Si nous avions voulu prévoir un emplacement le plus petit possible, nous aurions pu le préciser de la sorte :

?

<!Doctype html>

<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

        <meta name="viewport" content="width=device-width, initial-scale=1">     </head>

<body>

<div class="container">

<div class="row">

<div class="col-xs-1 bordureRouge">

</div>

</div>

</div>

</body>

</html>

D'autres tailles d'emplacements sont possibles : col-xs-* ou col-sm-* ou col-md-* ou col-lg-*.

Question : « Je ne comprends pas, c'est le chiffre 1 ou les lettres md qui gère la taille de l'emplacement ? »

Très bonne question, le nombre d'emplacements est géré par le chiffre tandis que la taille d'un emplacement et son elasticité sont gérées par les lettres : xs, sm, md ou lg.

1.  xs = extra small screens (mobile - écran petit)

2.  sm = small screens (tablette - écran réduit)

3.  md = medium screens (ordinateur portable - écran moyen)

4.  lg = large screens (ordinateur de bureau - grand écran)

Pour le comprendre, voici un tableau récapitulatif avec les 4 tailles majeures d'écrans et de résolutions :

Écran

Écran minimum

Écran réduit

Écran moyen

Grand Écran

Illustration

       

Type

SmartPhone

Tablette

Ordinateur Portable

Ordinateur de bureau

Classe CSS

Bootstrap

col-xs-*

col-sm-*

col-md-*

col-lg-*

Résolution d'écran

< 768 px

>= 768 px

< 992 px

>= 992 px

< 1200 px

>= 1200 px

Vous pouvez retrouver le tableau officiel de bootstrap en cliquant ici

Comme vous le voyez, Bootstrap a prévu des classes différentes en fonction des tailles d'écrans.

Question : « Oui d'accord, j'y vois à peine plus clair mais moi qu'est-ce que je dois choisir entre col-xs-*, col-lg-* et les autres possibilités ? et comment je m'y retrouve ? »

Réponse : Tout dépend de ce que vous voulez faire, pour cela il nous faut un cas d'étude !

Exemple: vous avez 2 zones que vous souhaitez conserver côte à côte lors de la lecture sur smartphone. Il faudra donc choisir col-xs-*.

Zone col-xs-* sur SmartPhone

Zone col-lg-* sur SmartPhone

   

Si vous choisissez col-lg-*, il est certain que les zones auraient fini par s'empiler l'une en dessous de l'autre lors de l'affichage sur un petit écran.

Pour résumé : col-xs-* : les 2 zones resteront côte a côte sur un petit écran col-lg-* : les 2 zones s'empileront l'une en dessous de l'autre sur un petit écran.

Pour info et si vous souhaitez tester ce comportement, voici le code correspondant :

   

col-xs-1 : 8.33% col-sm-1 : 8.33% col-md-1 : 100% col-lg-1 : 100%

 

En résolution d'écran < 768 px :

col-xs-1 : 8.33% col-sm-1 : 100% col-md-1 : 100% col-lg-1 : 100%

 

Question : A quelle taille correspondent exactement les chiffres et le nombre d'emplacements ?

 

Tableau des pourcentage % par nombre d'emplacement.

       

emplacement

1

2

3

4

5

6

7

8

9

10

11

12

taille en largeur

(width)

8,33%

16,66%

25%

33,33 %

41,66 %

50 %

58,33 %

66,66 %

75 %

83,33 %

91,66 %

100 %

Si vous souhaitez faire des tests, voici le code correspodant :

       

<!Doctype html>

<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

        <meta name="viewport" content="width=device-width, initial-scale=1">     </head>

<body>

<div class="container">

<div class="row">

<div class="col-xs-1 bordureRouge"> </div>

<div class="col-sm-1 bordureVerte"> </div>

<div class="col-md-1 bordureBleue"> </div>

<div class="col-lg-1 bordureOrange"> </div>

</div>

</div>

</body>

</html>

     

?

Redimensionner la fenêtre pour voir le comportement de chacune des zones

Et oui, si vous êtes un ancien intégrateur il va falloir vous y faire ! nous n'intégrons plus en pixels (px) mais en % le plus possible ! avec ou sans bootstrap.

 

13                         Container centré ou container pleine largeur ?

La classe .container et la classe .container-fluid

La classe .container permet d'englober la page (ainsi que le reste du code) et de le centrer sur la page, dans une taille fixe qui s'adapte en fonction de la résolution d'écran.

La classe .container-fluid permet d'englober la page (ainsi que le reste du code) sur toute la largeur de la page.

Écran

Écran minimum

Écran réduit

Écran moyen

Grand Écran

Illustration

       

Type

SmartPhone

Tablette

Ordinateur Portable

Ordinateur de bureau

Résolution d'écran

< 768 px

>= 768 px

< 992 px

>= 992 px

< 1200 px

>= 1200 px

Classe CSS .container

100 % de la taille restante

750 px

970 px

1170 px

Classe CSS .container-fluid

100 %

100 %

100 %

100 %

Voici un exemple avec la classe .container-fluid :

 

<!Doctype html>



<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

        <meta name="viewport" content="width=device-width, initial-scale=1">     </head>

<body>

<div class="container-fluid">

<div class="row">

<div class="col-xs-6 bordureRouge"> </div>

<div class="col-xs-6 bordureVerte"> </div>

</div>

<div class="row">

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

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

</div>

</div>

</body>

</html>

?

 

résultat

Avec l'utilisation de la classe CSS .container-fluid, les emplacements prennent toute la largeur de la page web.

14                         Nombre d'emplacements différents : Combiner du MD et XS en même temps !

?

<!Doctype html>

<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

        <meta name="viewport" content="width=device-width, initial-scale=1">     </head>

<body>

<div class="container">

<div class="row">

<div class="col-xs-6 col-sm-4 bordureRouge">

Colonne 1

</div>

                <div class="col-xs-6 col-sm-8 bordureVerte">                     Colonne 2

</div>

</div>

</div>

</body>

</html>

La colonne 1 prendra 1/2 de l'écran pour les écrans mobiles (la moitié soit 6 places), et 1/3 de l'écran pour les tablettes (un tiers soit 4 places).

La colonne 2 prendra 1/2 de l'écran pour les écrans mobiles (la moitié soit 6 places), et 2/3 de l'écran pour les tablettes (deux tiers soit 8 places).

                                Sur un écran mobile (smartphone), taille inférieure à < 768px, ce sont les classes xs qui seront prises en compte.

                                     Sur un écran type tablette, taille supérieure à >= 768 px et inférieure à < 992 px, ce sont les classes sm qui seront prises en compte.

 Sur un écran type ordinateur portable, taille supérieure ou égal à >= 992 px et inférieure à < 1200 px, ce sont les classes md qui seront prises en compte.

                                    Sur un écran type ordinateur de bureau, taille supérieure ou égal à >= 1200 px, ce sont les classes lg qui seront prises en compte.

15                         Nombre d'emplacements, comportement et affichage différent selon la taille d'écran et résolution utilisée !

Avec bootstrap il est facilement possible de donner des régles d'affichage différentes en fonction de la résolution utilisée.

Exemple / Cas d'étude : Imaginons que sur ma page web, je souhaite afficher une zone d'informations complémentaires sur ordinateur et non pas sur mobile (car je dois garder uniquement le contenu principal et faire des choix d'affichage par manque de place).

Pour cela, nous allons pouvoir nous servir des classes visible-* hidden-*

Nous pouvons également demander un nombre d'emplacements selon la taille de l'écran et la résolution utilisée.

?

<!Doctype html>

<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

        <meta name="viewport" content="width=device-width, initial-scale=1">     </head>

<body>

<div class="container">

<div class="row">

                <div class="col-xs-6 col-sm-5 col-md-5 col-lg-4 bordureRouge">                     Zone Gauche                 </div>

<div class="col-xs-6 col-sm-5 col-md-5 col-lg-4 bordureVerte">

                    Zone Milieu                 </div>

<div class="hidden-xs col-sm-2 col-md-2 col-lg-4 bordureOrange">

Zone Droite

</div>

</div>

</div>

</body>

</html>

résultat En taille grand écran (maximum, ordinateur de bureau) - LG :

 

La zone de gauche (rouge), celle du milieu (verte) et celle de droite (orange) prenne toutes 4 places chacune.

En taille écran moyen (moyen, ordinateur portable) - MD :

 

La zone de gauche (rouge) prend 5 places (+1), la zone du milieu (verte) prend 5 places (+1), et la zone de droite (orange) prend 2 places (-2).

En taille écran réduit (réduit, tablette) - SM :

 

La zone de gauche (rouge) prend toujours 5 places (-), la zone du milieu (verte) prend toujours 5 places (-), et la zone de droite (orange) prend toujours 2 places (-

).

En taille petit écran (petit, smartphone) - XS :

 

La zone de gauche (rouge) prend 6 places (+1), la zone du milieu (verte) prend 6 places (+1), et la zone de droite (orange) ne s'affiche plus du tout avec hiddenxs donc 0 place (-2).

16                                                                   Décalage des emplacements et ordre des colonnes

Avec l'utilisation des float, nous pouvons démarrer un flux de la gauche ou de la droite.

Cela est un peu différent dans bootstrap, nous pouvons créer des décalages.

Pour s'écarter de la gauche, nous utiliserons la classe : col-lg-push-*

Pour s'écarter de la droite, nous utiliserons la classe : col-lg-pull-*

   

                </header>

   

Pour créer un site web avec Bootstrap, nous aurons besoin de garder à disposition les classes css prédéfinies, nous allons donc ouvrir la dans un nouvel onglet (sauf si vous connaissez déjà tout par coeur :p)

 

?

<!Doctype html>

<html>

<head>

<meta charset="utf-8" >

<title>Mon Site avec Bootstrap</title>

<link rel="stylesheet" href="">

<link rel="stylesheet" href="">

<script src=""></script>

<script src=""></script>

    </head>

    <body>           

        <header>

            <div class="container"> <!-- Tout contenant se divise en 12 colonnes. #container doit etre present et il permet de centrer -->

                <div class="row"> <!-- .row : on utilise "row" dès lors que l'on souhaite faire une ligne. -->

                    <div class="col-md-7 col-md-offset-1 bordureRouge"> <!-- col est colonne // md c'est middle (xs petit) // 7 est le nb de place prise sur les 12 disponible. -- col-md-offset-1 correspond a la marge de gauche de l'espace d'une colonne. -->

                            <h1>

                                <span class="glyphicon glyphicon-star"></span>

                                <a href="">Monnom Monprenom</a>

                                <br>

                                <small>Communication / Marketing / Digital</small>

                            </h1>

                    </div>

                    <div class="col-md-3 bordureVerte"> <!-- col-md-3 je prends 3 places (sur les 12) -->

                        <a href="">Telecharger mon CV</a><br>                         <a href="">Partagez</a>

                    </div>                 </div>

                <div class="row"> <!-- row : une ligne. -->

                    <div class="col-md-10 col-md-offset-1"> <!-- col-md-10 : je prends 10 places // col-md-offset-1 : marge de l'espace d'une colonne-->                         <nav class="navbar"> <!-- navbar marges en dessous le menu -->

                            <ul class="nav nav-tabs nav-justified" role="tablist"> <!-- nav-justified permet de prendre l'espace totale en largeur, peut importe le nb de liens, c'est recalcule (tester en ajoutant 1 lien en+)-->

                                <li><a href="">Accueil</a></li> <!-- nav-tabs permet de mettre un trait en desosus et de donner un style "onglet". -->                                 <li><a href="">Mon CV</a></li><!-- nav permet de mettre un display block et faire en sorte qu'il prenne davantages de place. -->

                                <li><a href="">Mes Projets</a></li>

                                <li><a href="">Contact</a></li>

                            </ul>

                        </nav>

                    </div>

                </div>

        <meta name="viewport" content="width=device-width, initial-scale=1">

</div>

</header>

</body>

</html>

Résultat

 

Quelques Explications (sur les classes bootstrap utilisées ci-dessus pour construire le haut de site)

A l'intérieur de la balise <header>, la zone <div class="container"> permet de centrer le contenu sur la page web et de travailler à l'intérieur du système 12 colonnes.

Une fois à l'intérieur du container, nous créons une <div class="row"> qui permet de déclarer une nouvelle ligne.

A l'intérieur de cette zone <div class="row">, nous prévoyons un emplacement de 7 places .col-md-7 avec 1 place de marge à gauche .col-md-

offset-1

Le <span> présent à l'intérieur contient la classe .glyphicon glyphicon-star permettant d'afficher une icone à côté du titre et slogan du site.

A côté de cette première zone, nous y associons un deuxième emplacement .col-md-3 (3 places) contenant des liens.

L'utilisation à nouveau de <div class="row"> nous permet de déclarer une nouvelle ligne pour prévoir le menu de navigation.

Pour cela, nous n'utilisons qu'un seul emplacement de 10 places .col-md-10 avec 1 place de marge de chaque côté .col-md-offset-1.

La classe CSS .navbar permet d'appliquer une marge sous le menu.

La classe CSS .nav permet d'appliquer un display block sur le <ul>.

La classe CSS .nav-tabs permet de mettre un trait en dessous et de donner un style "onglet".

La classe CSS .nav .nav-tabs .nav-justified permet de prendre l'espace total en largeur, peu importe le nombre de liens, c'est recalculé.

                                        <ul class="list-unstyled">

<li>Redaction cahier des charges</li>

<li>elaboration de votre design & Integration precise</li>

     <li>Administration sur CMS : Wordpress & Drupal</li>

 

Résultat

     

 

     

Liam TARDIEU

     -    

 



134