bootstrap-slider

Présentation de Twitter Bootstrap

Avant que la fin du monde ne nous tombe dessus, je veux que vous puissiez partir en ayant pris connaissance de cet outil. Il s’agit de Twitter Bootstrap !

Je change un peu de domaine pour cet article qui sera un peu plus technique que les précédent puisque je m’adresse ici essentiellement aux Développeurs Web ou du moins à celles et ceux qui souhaitent gagner du temps pour développer une application web et en particulier sur le design et la mise en page.

Bootstrap est en fait un Framework CSS qui va vous aider à mettre en forme vos pages web. L’avantage principal : garantir un aspect unique quelque soit le navigateur grâce à une compatibilité totale intégrée. Mais le second avantage, plus à la mode, est le fait de pouvoir disposer d’une application responsive, c’est à dire qui s’adapte automatiquement en fonction de votre écran/périphérique (iPad, iPhone, Galaxy Note, …).

Bootstrap est une initiative du réseau social Twitter et contient du code basé sur HTML 5 et CSS 3, des plugins jQuery, une superbe documentation, .. Bref Bootstrap est parfait !

Le site officiel résume efficacement le projet et est codé grâce au Framework.

L’arborescence du dossier est simple et à uploader sur votre serveur.

arbre-bootstrap

 

Ensuite il faut faire appel sur chacune de vos pages stylisées par Bootstrap à l’ensemble des éléments de Boostrap grâce aux instructions suivantes.

appel-bootstrap

 

L’attribut <link> et le second attribut <script> référencent des éléments que vous venez d’uploader alors que le premier attribut <script> fait appel à un fichier JavaScript externe stocké sur les serveurs de jQuery.

Votre page dispose désormais de tout ce dont elle a besoin. Il ne reste plus qu’à faire appel à la mise en page sur chacun des composants à modéliser. Pour faire simple voici un exemple de création de tableau aux lignes colorées.

bootstrap-1

La première ligne (attribut <tr>) est verte car qualifiée de valide. Il vous suffit d’ajouter l’attribut class à la ligne. Celui-ci a la valeur « success« . Pour la deuxième ligne la valeur de class sera « error« , etc, …

Le petit plus pour finir c’est la possibilité de personnaliser complètement et simplement le CSS depuis le site officiel, avant de le télécharger. Parfait pour ceux qui comme moi ne peuvent s’empêcher de tout casser quand ils vont jouer avec un fichier dont la syntaxe correcte est primordiale.

 

Je vous laisse découvrir ce bel outil. Si vous avez des questions n’hésitez pas 🙂 !

RelatedPost