Bootstrap 3 : un framework html très utile

BootStrapBootstrap

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.

Projet BTS Galaxy Swiss Bourdin

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *