Développer son site responsive avec Bootstrap

Développer son site responsive avec Bootstrap

Qu’est ce que Bootstrap ? :

Bootstrap est une bibliothèque CSS et même plutôt un framework qui a pour utilité de réaliser des pages web qui contiennent beaucoup de CSS. Il accélère et améliore la création de sites web ergonomiques, design et responsives. C’est une boite à outils qui s’appel un kit CSS qui a été conçue par les développeurs de Twitter. Bootstrap s’est imposé depuis comme le framework CSS de référence. Il apporte également des plugins jQuery dédiés à l’enrichissement des pages internet mais nous pouvons très bien trouver des plugins libre de droit sur internet.

Contenu du kit CSS :
  • Espace de travail basé sur une grille responsive de 12 colonnes (le nombre de colonnes est configurable). grâce au développement du code “col” qui signifie colonne qui vas jusqu’à 12 exemple “col 1 à 12”
  • Feuille de style Normalize.css. communément appelé “style.css”
  • Utilisation du HTML5 et CSS3.
  • Code responsive qui prend en compte les formats des différents supports (desktop, mobile, tablette, ordinateur portable ou fixe).
  • Plugins jQuery de bonne qualité.
  • Documentation et tutoriel est très bien fournie.
Le CSS des navigateurs :

Chaque navigateur a ses propres valeurs dédiées aux styles et éléments HTML et CSS. Les rendus varient ainsi d’un navigateur à un autre.

Les grilles sur Bootstrap :

Utiliser Bootstrap c’est baser son travail sur une plateforme de grille qui va créer l’aspect visuel de la page web. On peut ainsi créer rapidement et facilement un site internet professionnel avec peu de lignes de codes.

Le rendu des sites web :

Quatre tailles de grilles sont prédéfinies dans Bootstrap qui sont modulable comme vous le souhaitez.

  1. les éléments vont se redimensionner, tout en conservant leurs proportions, en restant positionnés au même endroit sur la page.
  2. les éléments vont s’empiler, c’est-à-dire qu’ils vont s’afficher             les uns en dessous des autres.

Un aspect visuel :

Voici un exemple d’un site fait en Bootstrap V4 de l’association Digital Generation

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

div#stuning-header .dfd-stuning-header-bg-container {background-image: url(https://leocheviron.com/wp-content/uploads/2018/11/responsive.jpg);background-size: initial;background-position: top center;background-attachment: initial;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 450px;}