EXERCICE D’APPLICATION BOOTSTRAP

Contexte : vous devez créer un site web pour promouvoir les activités culturelles de votre
ville ou village. On vous demande de créer ce site rapidement et vous souhaitez utiliser
Bootstrap pour gagner du temps et pouvoir utiliser des composants (widgets) déjà prêts.

Consigne :

• Créez une page d’accueil, essentiellement graphique avec un peu de texte, qui
souhaite la bienvenue au visiteur et lui indique ce que l’on peut trouver sur le site. Des
liens sont prévus pour accéder aux autres pages dans le corps de l’accueil.

• Ajouter un menu de navigation en haut de la page qui suit le scroll lorsqu’on va plus
bas dans la page. Ce menu doit contenir les éléments suivants dans l’ordre :

o Accueil (avec une icône de maison à gauche du texte)

o Plus d’infos

o Activités du mois

o Un champ de recherche

o Contact

o Un bouton pour se connecter à son espace membre

• La page « Plus d’infos » doit contenir quelques éléments détaillant les différents types
d’activités culturelles organisées (musée de la ville, marathon… prévoyez-en au
moins 6 différentes). Utilisez des images et les fonctionnalités responsive des images
avec Bootstrap. Structurez les éléments avec le composant « media object » pour que
ceux-ci s’alignent correctement.

• La page « Activités du mois » liste au moins 10 activités à venir dans le mois sous
forme de tableau (avec date, titre et court descriptif). Les lignes doivent se colorer au
survol pour qu’on puisse se repérer. Il doit y avoir au moins une ligne en rouge (erreur)
avec un commentaire qui indique que l’événement est annulé. Un bouton
« Inscription » à droite de chaque ligne du tableau ouvre un menu déroulant
contenant deux options « Seul », « Accompagné ». Le clic sur ces liens n’a aucun effet.

• Le champ de recherche doit être présent dans le menu de navigation mais n’a aucun
effet.

• La page « Contact » affiche un formulaire de contact structuré avec les champs « Titre
du message », « Votre nom », « Votre date de naissance », « Votre e-mail », une case à
cocher « Résident de la ville », un menu déroulant « Nationalité » (avec seulement 4-5
choix, pas la peine de mettre tous les pays !) et un champ « Message » où on peut
rédiger son message. Un petit texte d’aide s’affiche sous le champ date de naissance

1/2

www.openclassrooms.com
 EXERCICE D’APPLICATION BOOTSTRAP

pour dire que le format JJ/MM/AAAA est attendu. L’envoi du formulaire n’a aucun
effet.

• Le bouton pour se connecter à son espace membre ouvre une page de connexion
avec un formulaire login/mot de passe centré. Le menu de navigation doit être
présent sur cette page. L’envoi du formulaire n’a aucun effet.

• Les pages doivent être conçues de telle sorte à ce que le site s’affiche correctement
sur toutes les résolutions.

2/2

www.openclassrooms.com