Sommaire

L’étude d’un site Bootstrap SITES CRÉÉS AVEC BOOTSTRAP:Étude d’un site créé avec Bootstrap

1. Le site differential.io

Bootstrap propose une liste des plus beaux sites créés avec leur framework. Vous pouvez consulter cette liste à cette URL : http://expo.getbootstrap.com

images/C16-001.png

Dans la liste des sites, nous vous proposons d’étudier le site differential.io (http://differential.io).

2. Les affichages adaptatifs

Voici l’affichage du site complet sur un écran large :

images/C16-002.png

C’est un site qui est en design adaptatif, qui s’adapte donc selon la taille des écrans. Voilà le site affiché sur un écran de taille moyenne :

images/C16-031.png

Enfin, voilà son affichage sur un écran plus petit, de type smartphone :

images/C16-003.png

3. La structure générale

Voyons maintenant la structure générale du site, vue sur un écran large :

images/C16-004.png

En premier, nous avons l’élément <header> qui contient la barre de navigation.

Ensuite, un premier élément <section class="billboard"> affiche une photo et le slogan du site.

Un deuxième élément <section class="what-we-do"> affiche un titre et trois textes avec des titres.

Un troisième élément <section class="featured-work"> affiche les produits sur fond orange.

Un quatrième élément <section class="company-updates"> affiche des articles d’un blog ...