Books on bootstrap pdf [Eng]


Télécharger Books on bootstrap pdf [Eng]

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

Télécharger aussi :


Qu’est-ce que Bootstrap ?

Bootstrap est un framework CSS développé par les équipes de Twitter. C’est le plus populaire des frameworks CSS. Il offre un ensemble de composants structurés qui sert à créer les bases de vos pages web et à organiser le code.

A quoi sert-il ?

Il permet de construire en très peu de temps et facilement des sites web esthétiques et responsives (cela signifie que les pages s'adaptent automatiquement au support utilisé pour les visualiser).

Bootstrap vous facilite le travail en termes de :

- productivité car il suffit généralement d’utiliser les classes prédéfinies pour obtenir un bon résultat

- maintenance car le code est clair et beaucoup de développeurs connaissent Bootstrap

Pourquoi utiliser Bootstrap plutôt qu’un autre framework CSS ?

Avantages

- Présentation similaire quel que soit le navigateur utilisé et parfaite compatibilité

- Temps gagné par l’utilisation d’une base qui a fait ses preuves

- Normalisation de la présentation avec un ensemble homogène de styles

- Framework CSS le plus utilisé et donc très documenté (vidéos, documentations, forums…)

Inconvénient

- Temps d’apprentissage pour maîtriser le framework mais la prise en main est rapide même pour un débutant, c’est l’objet de ce tutoriel.

Comment s’en servir ?

Bootstrap propose un système de grille qui permet d’agencer les éléments de vos pages et d’adapter les pages au support utilisé pour les visualiser.

Il propose aussi un style pour les boutons, formulaires et autres éléments de vos pages. Ce style peut facilement être modifié tout en conservant tous les avantages de Bootstrap.

Présentation de la version actuelle : la version 3

Elle intègre totalement l’aspect responsive alors que cette fonctionnalité était séparée dans les précédentes versions. Aussi, on peut considérer cette version comme « mobile-first », c’est-à-dire développée et pensée pour les appareils mobiles afin de couvrir tous les besoins.

Installation

Allez sur le site getbootstrap.com/getting-started/#download et cliquez sur le bouton de téléchargement « Download Bootstrap ».

Dézippez le fichier et le placer dans le dossier www de votre serveur local ou web.

Le dossier contient 3 sous-dossiers :

CSS :

  • bootstrap.css comporte les classes de base de Bootstrap
  • bootstrap-theme.css contient des règles de styles particulières pour créer un thème spécifique pour Bootstrap

FONTS :

  • glyphicons-halflings-regular.svg comporte la collection d'icônes au format svg
  • glyphicons-halflings-regular.ttf comporte la collection d'icônes au format ttf
  • glyphicons-halflings-regular.woff comporte la collection d'icônes au format woff
  • glyphicons-halflings-regular.eot comporte la collection d'icônes au format eot

JS :

  • bootstrap.js contient le code JavaScript des composants de Bootstrap

Les fichiers min (bootstrap.min.css, bootstrap.min.js et bootstrap-theme.min.css) contiennent le même code que leurs équivalents (bootstrap.css, bootstrap.js et bootstrap-theme.css) mais ont été épurés des commentaires et compressés pour les alléger et accélérer ainsi leur chargement. Ils sont à utiliser en environnement de production, une fois que le développement est terminé.

Les fichiers bootstrap-theme.css.map et bootstrap.css.map permettent de retrouver l'emplacement original d'une ligne de code à partir du code minifié. Cette fonctionnalité est utilisable avec les dernières versions de Chrome et Firefox. Ces fichiers ne sont pas indispensables au fonctionnement de Bootstrap.

Intégration

Vous pouvez créer une nouvelle page avec le code ci-dessous ou choisir de partir d’un template.

Code

<!DOCTYPE html>

<html lang="fr">

<head>

<title>Bootstrap demo</title>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">



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

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

<!--[if lt IE 9]>

<script src=" oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src=" oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<![endif]-->

</head>

<body>

<h1>Hello, world!</h1>

</body>

</html>

Explication du code

<meta name="viewport" content="width=device-width, initial-scale=1"> permet d’ouvrir la fenêtre à la largeur de l’écran avec « width=device-width » et de régler le zoom avec « initial-scale=1 ». La balise META viewport permet de fixer certaines valeurs pour les Media Queries. Les Media Queries permettent d'adapter la restitution d’une page à différentes caractéristiques des terminaux (taille écran, zoom, définition…).

<link href="bootstrap/css/bootstrap.css" rel="stylesheet"> est la déclaration du fichier CSS pour son utilisation dans la suite du code. Faites attention à spécifier le bon chemin d’accès. Ce fichier est le cœur de Bootstrap.

La partie commentée (balises <!-- … -->) permet de gérer les spécificités d’Internet Explorer.

Votre code doit se trouver entre le balises <body></body> au-dessus des balises <script>.

La grille de Bootstrap

Bootstrap propose un système de grille qui permet d’agencer les éléments de vos pages et d’adapter les pages au support utilisé (détecté par les Media Queries) pour les visualiser.

La grille de Bootstrap est composée de 12 colonnes de même largeurs qui occupent ensemble la largeur de l’écran. On peut avoir plusieurs lignes sur cette grille et elles ne sont pas forcément de même hauteurs. La hauteur d’une ligne est celle du plus gros élément qu’elle contient.

Le tableau ci-dessous présente pour chaque type de support la largeur de référence utilisée par les Media Queries et la classe Bootstrap adaptée à cette largeur d’écran.

Dans la classe Bootstrap, on précise à la place de * le nombre de colonnes sur lequel l’élément possédant cette classe doit être affiché.

Exemple 1

<!DOCTYPE html>

<html>

<head>

<link href="bootstrap/css/bootstrap.css" rel="stylesheet">

</head>

<style>

body {padding-top: 10px;}

[class*="col-"], footer {

background-color: lightgreen;

border: 2px solid black;

border-radius: 6px;

line-height: 40px;

text-align: center;}

</style>

<body>

<div class="container">

<div class="row">

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

<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="row">

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

</div>

<div class="row">

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

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

</div>



</div>

</body>

</html>

N.B : pour tester les exemples, il suffit de réduire la fenêtre de votre navigateur pour observer l’évolution de l’agencement des éléments de la page.

Sur un écran moyen ou grand (détecté comme de largeur supérieure ou égale à 992 px), on obtient :

Sur un écran petit ou réduit (détecté comme de largeur inférieure à 992 px), on obtient :

Explication de l’exemple 1

La classe « container » contient et centre la grille sur une largeur fixe, qui s'adapte en fonction de la largeur de l'écran. Il est recommandé de l’utiliser. On utilise la classe « row » pour obtenir plusieurs lignes ou rangées. On place ensuite les éléments au sein de chaque rangée et on les dimensionne en indiquant le nombre de colonnes qu’ils occupent.

Exemple 2

<body>

<div class="container">

<div class="row">

<div class="col-lg-1 col-md-6">1 col</div>

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

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

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

</div>

<div class="row">

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

<div class="row">

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

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

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

</div>

</div>

</div>

</div>

</body>

… … …

Explication de l’exemple 2

On peut inclure des lignes dans des lignes comme on le voit dans la ligne « 12 colonnes » dans laquelle se trouve une ligne avec 3 éléments distincts. On peut aussi utiliser la classe col-lg-offset-* pour sauter le nombre de colonnes indiquées à la place de *. En utilisant les classes col-lg-* et col-md-* avec des valeurs différentes à la place de *, on prévoit deux agencements différents de la page. Un bon exercice est de prévoir un troisième agencement différent pour les petits écrans (inférieurs à 768 px).

Utilisation des éléments Bootstrap

Grâce au système de grille, on peut prévoir des agencements complexes des éléments selon les supports de visualisation. Voyons les différents éléments de base qu’il est possible d’utiliser.

Les listes

Bootstrap applique un style sur listes (rappel : <ul><li></li><li></li><li></li></ul>) : par défaut, les éléments de la liste (<li></li>) sont affichés avec une indentation et une puce.

… …

Les images

On peut modifier l’apparence des images (rappel : <img src="images/img1.jpg">) avec les classes suivantes :

- « img-responsive » pour que l’image occupe tout l’espace de son contenant,

- « img-rounded » pour avoir des bords arrondis,

- « img-thumbnail » pour avoir un effet vignette, etc.

Les boutons

Pour insérer un bouton par défaut : <button type="button" class="btn btn-default">Bouton par défaut</button>. On utilise donc les classes « btn » et « btn-default ». Vous pouvez tester, toujours avec la classe « btn », les classes : « btn-success », « btn-primary », « btn-warning ». Pour changer les dimensions, ajoutez une des classes : « btn-lg », « bnt-sm », « btn-xs ».



16