Framework Bootstrap 3, intégrer en responsive facilement

Intégrer en responsive, nous parait toujours compliqué, mais avec bootstrap ça va évoluer mais en revanche quelques pré requis seront nécessaires. Vous devez avoir des notions dans les langages HTML, CSS, voir jQuery.

Prise en main de Bootstrap 3

Rendez-vous sur la page : http://getbootstrap.com/getting-started/
Au lieu de télécharger Bootstrap avec le bouton Download Bootstrap, télécharger plutôt la source code.

Pourquoi cette archive ? Elle contient le noyau Bootstrap dans le dossier /dist/ mais elle contient également quelques exemples qui nous permettrons de démarrer en toute simplicité. Rendez-vous dans le dossier /docs/examples/

bootstrap

Dans chaque sous-dossier, vous aurez deux fichiers :
1.Le fichier index.html qui contient la structure de base.
2.Le fichier de styles .css
Je vous invite fortement à faire le tour complet de chaque exemple afin de comprendre le fonctionnement.

Définir vos grilles

Par défaut, Bootstrap utilise un système avec une grille de 12 colonnes (voir le site 960.gs ).

La page sera ainsi divisée en 12 sections de tailles égales que vous pourrez adapter à votre besoin (en jouant sur les multiples de 12)

Par exemple pour créer une page Web avec 2 colonnes, il suffit d’ajouter les lignes suivantes entre les balises <body> … </body> de votre fichier HTML

Pour avoir une disposition fluide on utilisera la classe row qui permet d’adapter dynamiquement la largeur de vos deux colonnes en fonctions de la résolution de l’écran.

Bootstrap génère par défaut des padding entre deux colonnes (environ 20 pixels pour un div container). Il est possible d’ajouter des padding supplémentaire avec la classe offset.

Par exemple pour créer un espace de taille 1/12 d’écran entre vos deux colonnes, on fera comme ceci:

La somme des colonnes et des espacements devraient toujours être égale à 12 (Dans notre cas col-md-8 + col-md-offset-1 + col-md-3 = 12)
Comme nous l’avons vu la grille par défaut à une valeur de 12.

Mais il est possible d’utiliser une autre valeur en prenant par exemple une grille de 6 et y créer deux colonnes de 4 et de 2, on pourrait utiliser le code suivant:

Responsive design avec bootstrap

Nous avons vu précédemment, bootstrap utilise un système avec une grille de 12 colonnes et qu’il est possible d’imbriquer des grilles dans d’autres et ainsi intégrer facilement sa page sans se soucier des redimensionnements de fenêtres.
En effet, le responsive design est géré par Bootstrap. Votre site sera donc automatiquement compatible avec les tablettes et les smartphones.

Le tableau suivant donne la liste des tags ou classe qu’on utilisera pour afficher certains blocs sur les différents supports:

tableau bootstrap

Comment lire ce tableau ? C’est relativement simple. Prenons un exemple. Nous voulons cacher automatiquement la sidebar quand notre site est consulté depuis un smartphone. Nous allons pour cela affiché les classes .hidden-sm et .hidden-xs de la manière suivante:

Répondre