BOOTSTRAP

BOOTSTRAP

« Build fast, responsive sites with Bootstrap »

Voila la proposition de Bootstrap  » Créer rapidement des sites responsives ! »

Si je veux faire cette exemple :

Exemple de page Bootstrap
Exemple de page codé avec Bootstrap

Je vais devoir coder beaucoup beaucoup de CSS, pour que le titre soit centré avec un fond qui prend toute la page. Avoir trois containers alignés avec leur texte et surtout que ces trois containers passent l’un en dessous de l’autre à partir d’une taille d’écran plus petite…

Boostrap va me permettre de faire cela en ajoutant une ligne de code dans le head de ma page et en utilisant les bonnes class dans mon code.

Comme ceci:

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Un exemple Bootstrap</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
  <div class="jumbotron text-center">
    <h1>Mon titre</h1>
    <p>Cette page est reponsive. Faites le test !</p>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
...

Dans ce code la ligne : « <link rel= »stylesheet » href= »https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css »> » appelle la bibliothèque Bootstrap.

La class « jumboton » permet de placer la div titre avec un fond sur la largeur de la page, « texte-center » va centrer le texte, « row » va faire une ligne, « col-sm-4 » va indiquer que la div doit prendre 4 positions sur 12. Voilà en quelques lignes une jolie présentation et en plus responsive.

Et si je cherche la class « jumbotron » dans Bootstrap je vais trouver quoi ?

Oui Bootstrap est open source donc il est possible de voir le code et même de le modifier pour faire différent et ou mieux.

.jumbotron{padding-top:30px;padding-bottom:30px;margin-bottom:30px;color:inherit;background-color:#eee}
.jumbotron .h1,.jumbotron h1{color:inherit}
.jumbotron p{margin-bottom:15px;font-size:21px;font-weight:200}
.jumbotron>hr{border-top-color:#d5d5d5}
.....

Mais c’est du CSS !!! Et oui Bootstrap c’est « simplement » du CSS mais déjà écrit pour vous. Il y a aussi du html et du JavaScript.

Voilà pour l’exemple mais qu’est-ce que Bootstrap ?

Bootstrap est une collection d’outils utiles à la création du design (graphisme, animation et interactions avec la page dans le navigateur, etc.) de sites et d’applications web. C’est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option. C’est l’un des projets les plus populaires sur la plate-forme de gestion de développement GitHub.

https://fr.wikipedia.org/wiki/Bootstrap_(framework)

Une bonne définition de Wikipédia qui parle d’une collection d’outils (bibliothèque) bien que le titre de la page parle de Framework.

Une bibliothèque est une collection de fonctionnalités, d’outils utilitaires qui peuvent être utilisés dans un programme. Un Framework incorpore des bibliothèques et fournit un environnement de développement ou le programmeur peut créer son propre programme. Donc pour trancher le débat Bootstrap est une bibliothèque !

Vous l’aurez compris Bootstrap permet de faire du plus jolie, du plus responsive, du plus plus …. avec un minimum de code, de connaissance et de temps.

Exemple bouton sans et avec Bootstrap

Par exemple le 1er bouton avec juste : <button type= »submit »>Envoyer</button> et l’autre bouton en ajoutant simplement : class= »btn btn-primary »

Pas de CSS à faire juste à retenir (ou trouver sur internet) quelques class.

D’autres avantages de Bootstrap

  • Bootstrap permet de rendre un site web attrayant en y incorporant de jolis effets d’animation. Ex : slider (défilement des images), des popups (les fenêtres modales)
  • Un système de grille permettant de diviser la page en 12 colonnes et d’indiquer dans le code le placement de chaque élément sur plusieurs taille d’écran. Doc Grille
  • La documentation est bien fournie, elle propose des exemples de l’utilisation des composants avec les codes sources. Doc Bootstrap
  • Bootstrap fournit plusieurs composants sous forme de plugins utilisant la bibliothèque jQuery (JavaScript). Ces composants permettent l’utilisation de nouvelles fonctionnalités au niveau de l’interface (tooltip, carrousels…) mais aussi d’améliorer le fonctionnement de composants existants (auto-complétion…).
  • La communauté BootStrap est très importante il sera facile de poser une question sur un forum.
  • Vous trouverez aussi beaucoup de template (gratuit ou payant) fait avec Bootstrap qu’il suffit de télécharger pour avoir votre modèle tout fait. Template
  • Des nouvelles versions régulières actuellement la version 4. Doc Version et bientôt une version 5 avec entre autre Javascript sans jQuery.
Tableau grille Bootstrap
Tableau de la grille Bootstrap

Trop parfait ?

Tout cela n’est pas trop facile, trop parfait. Si tout le monde utilise Bootstrap avec les mêmes templates on se retrouve avec beaucoup de site, sûrement bien fait, mais tous identiques! Bien sur il est possible de faire ses propres templates vu que Bootstrap est Open source mais peu de personnes vont le faire.

De plus vous devez télécharger sur la page l’ensemble des bibliothèques de Bootstrap pour en utiliser qu’une petite partie. Cela va ralentir le chargement de la page.

Mon avis

Si vous avez peu de connaissance en CSS, que vous avez besoin rapidement d’un site jolie et responsive utilisez Bootstrap. Vous allez surement trouvez un beau template (déjà utilisé dans beaucoup de site). Pour ajouter une spécificité demandée par votre client cela risque d’être compliqué.

Par contre si vous voulez sortir du lot, avoir un visuel différent des autres il vous faudra passer par le codage de votre propre CSS et JS. Au début cela sera un peu plus long mais quelle plaisir d’arriver à ses fin.

C’est pour arriver à la 2ème solution que je fais la formation de CDA au GRETA.


Plus loin …

Formations et tuto:

OpenClassRooms

Opentuto

W3Schools

D’autres sites

Site Bootstrap
Bootstrap 4
Grid System


0
0

Laisser un commentaire

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