Débuter avec Bootstrap
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 :
- Aller sur le site de Bootstrap : http://twitter.github.com/bootstrap/index.html
- Cliquer sur « Dowload » pour récupérer le package
- Décompresser le contenu du dossier « bootstrap » à la racine de notre projet
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 :
PHPOffice
...
- 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 :
</div><!--/row--> </div><!--/.fluid-container-->
Et voilà, la page est créé via l’aide de Twitter Bootstrap.
Voici quelques ressources pour vous aider :
- Quelques thèmes gratuits : Bootswatch
- Aide : Gestion du layout
- Aide : Gestion du style
- Aide : Gestion de composants HTML/CSS
- Aide : Quelques plugins JavaScript
- Créer la première colonne d’une largeur de 3/12ème de la page qui contiendra un menu de style sidebar :
Ajouter un commentaire