Bootstrap de Twitter pour un design simple et rapide

vendredi 9 décembre 2016

Vous êtes vous  déjà demandé s'il existait des choses pour se simplifier la vie? Rendre plus facile la tâche de faire un design? Alors Bootstrap est fait pour vous. Un outil qui facilite la vie de milliers de personnes.  Attention, cette article comporte certains termes techniques mais constitue une bonne base pour mettre en place un design responsive.

Logo de Bootstrap
Auteur: Bootstrap

Explications
Bootstrap est un Framework HTML, CSS et JavaScript pour le développement d’un design responsive. Il met à disposition des développeurs quantité de styles et de fonctionnalités. Par ailleurs, leur site web décrit tous les styles et fonctionnalités en donnant un exemple graphique et de mise en œuvre. Ce Framework a été développé par Twitter en 2011. Bootstrap nécessite JQuery pour certaines de ses fonctionnalités, raison pour laquelle il est associé à Bootstrap lors du téléchargement.

Quel sont les avantages à utiliser Bootstrap:
  • Application web finale responsive : Avec le système de grille et de breakpoint disponible de base, le design s’adapte facilement à beaucoup de terminaux.
  • Standardisation : Il permet la standardisation des applications, car il offre une définition de base pour tous les composants HTML.
  • Simple d’utilisation : Il dispose d’une très bonne documentation en ligne et il suffit d’appliquer les exemples donnés à notre cas.
  • Design rapide et beau : Il n’y a pas besoin de faire du CSS ou que très peu pour réaliser un design

Récupérer Bootstrap
Pour récupérer Bootstrap, il est conseillé de le télécharger sur leur site. Ci-dessous l’adresse pour le récupérer, il faut télécharger en cliquant sur le bouton « Download Bootstrap ».


Liaison entre le HTML et Bootstrap
Dans les fichiers HTML, il faut bien préciser ou se situe les feuilles de styles, le JavaScript et JQuery. Le lien entre les feuilles de styles et le HTML se fait via la balise « link » situé dans la balise « head ».
<link rel="stylesheet" href="static/css/bootstrap.min.css">
La liaison entre un fichier JavaScript et le HTML se fait via la balise « script » situé à la fin de la balise « body ».
<script type="text/javascript" src="static/js/bootstrap.min.js">


Où mettre ces modifications de design

Dans un fichier "CSS additions" qui contiendra toutes les modifications que vous apporterez à Bootstrap ainsi que les définitions CSS propres à l’application. Cela permettra de mettre à jour plus facilement Bootstrap et facilitera grandement les modifications.


J'espère que cette article plus technique vous aura plu. Peter


 Source:
http://getbootstrap.com/, consulté en 2016

Vous aimerez également