RootsLabs

More than a tool ! GitHub Google+ LinkedIn RSS

Débuter avec Bootstrap

Progi1984 - Commentaires (0)

Bootstrap est un framework JS/CSS créé par Twitter afin de rapidement développer l’architecture d’un site web tout en ayant des pages enrichies.

Afin de montrer cela, nous allons prendre comme exemple la page d’accueil pour PHPOffice.

Par où commencer ?

Tout d’abord, on va récupérer le package Bootstrap :

Et on va commencer à coder :

  • Inclure le style dans le head :
  • Inclure le javascript à la fin du body :
  • Créer la barre de navigation pour le menu :
  • Ouvrir deux div qui permettent de créer une page responsive avec deux colonnes :
  • Créer la première colonne d’une largeur de 3/12ème de la page qui contiendra un menu de style sidebar :
  • Créer une div qui contiendra la deuxième d’une largeur de 9/12ème de la page :
  • Créer une zone contenant le titre dans une hero unit :
  • On créer ensuite deux lignes responsive divisé en trois parties :
  • Fermer la div qui contient le contenu de la deuxième colonne :
  • Fermer les deux div englobantes :

Et voilà, la page est créé via l’aide de Twitter Bootstrap.

Voici quelques ressources pour vous aider :

Ajouter un commentaire

Commentaire :