Sommaire

WordPress et Bootstrap SITES CRÉÉS AVEC BOOTSTRAP:WordPress

1. Les thèmes

WordPress est le CMS le plus utilisé actuellement. Du fait de cette forte popularité, il existe de nombreux thèmes Bootstrap pour WordPress.

Nous allons utiliser le thème Flatty : http://wordpress.org/themes/flatty

2. Les affichages adaptatifs

Voilà l’affichage sur un écran large d’un site WordPress avec ce thème :

images/C16-019.png

Bien sûr, l’affichage s’adapte sur la grille adaptative de Bootstrap en fonction de la taille de l’écran.

Voilà l’affichage sur un écran moyen. La colonne latérale de droite passe sous la zone centrale d’affichage des articles.

images/C16-029.png

Et voilà l’affichage sur un écran de type smartphone. Dans le pied de page, les trois blocs qui étaient sur trois colonnes, passent sur une colonne, les uns sous les autres.

images/C16-030.png

3. La structure générale

Voici la structure principale de ce thème Bootstrap vue sur un écran large :

images/C16-020.png

4. La barre des menus

Dans la partie supérieure de ce thème, nous trouvons la barre des menus WordPress.

images/C16-021.png

La barre des menus est placée dans l’élément <nav class="navbar navbar-inverse navbar-static-top">.

La classe .navbar-inverse permet d’avoir entre autres un fond sombre (background: #222;).

Lorsque vous réduisez la largeur de la fenêtre du navigateur, la barre des menus bascule en un bouton.

<button class="navbar-toggle" ...