Bootstrap 3 : un framework html très utile
BootStrap
BootStrap 3 : Niveau de compétence
Présentation
Bootstrap est un framework css destiné essentiellement aux développeurs web qui veulent gagner du temps dans la conception de leur design et la mise en forme de leur site Web. Son avantage principal est de garantir un aspect unique quelque soit le navigateur grâce à une compatibilité totale intégrée. Mais le second avantage, plus dans l’air du temps, est le fait de pouvoir disposer d’une application responsive, c’est à dire qui s’adapte aux supports de l’utilisateur. (écran I PHONE, écran bureautique, écran tablette Samsung, écran de pc portable, etc…).
Bootstrap est une création du réseau social Twitter et contient du code écrit en HTML5 et CSS3. Il intègre aussi des plugins de JQuery et une documentation très complète. En résumé, il est très pratique.
Les composants disponibles avec ce framework sont nombreux mais le plus intéressant, c’est son système de colonne.
Son système de colonne
Ce framework utilise un système de colonne appelé Grid System. On l’utilise en déclarant des classes sur des balises div. Voici un tableau des classes pour le colonage selon le type de support utilisé :
| Très petits appareils Téléphones (<768px) | Petits appareils Tablettes (≥768px) |
Écran moyen (≥992px) | Grand écran (≥1200px) | |
|---|---|---|---|---|
|
Comportement de grille
|
Horizontal en permanence
|
Replié aux démarrage, horizontal au-dessus des points d’arrêt | ||
|
Largeur du conteneur
|
None (auto) | 750px | 970px | 1170px |
|
Préfixe de la classe
|
.col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
|
Nombre de colonnes
|
12 | |||
|
Largeur de colonne
|
Auto | ~62px | ~81px | ~97px |
|
Largeur de la gouttière
|
30px (15px de chaque côté d’un colonne) | |||
| Emboîtable | Oui | |||
| Décalages | Oui | |||
|
Classement de la colonne
|
Oui | |||
Les div .col doivent être contenu dans deux div. La première la div class="container ” et à l’intérieur une div class="row“. Ainsi la disposition des éléments dans une page HTML est grandement simplifié.
Origine de ma compétence
J’ai acquis cette compétence en découvrant une formation sur le site Vidéo2Brain. La formation vidéo s’intitule “Découverte de Bootstrap 3″ par le formateur Julien Moulin. J’ai trouvé ce framework très pratique et j’ai donc suivi une autre formation du même formateur. (“Bootstrap 3 : Intégration de chat, flux social et espace de galerie“). Depuis je l’utilise dans la plupart de mes projets Web.
Mes derniers projets avec BootStrap
Après avoir testé ce framework dans des petits projets de test, j’ai développé une application ou je l’utilise à 100%.
Cette application est le projet GSB (contexte pour le BTS), il est hébergé sur ce domaine pour montrer un exemple.
D5 Creation