Bootstrap est un ensemble de resources HTML Javascript et CSS permettant de rapidement créer des pages acceptables. Comme notre objectif est principalement les technologies côté serveur, nous allons nous servir de Bootstrap pour sauver du temps sur le côté client.
Première chose à faire, télécharger bootstrap. Vous le trouverez à l'adresse suivante:
http://twitter.github.com/bootstrap/
Le téléchargement vous donne un fichier bootstrap.zip qui à son tour vous donne un répertoire nommé bootstrap. Copiez ce répertoire dans le répertoire webapp de votre projet.
Note: le répertoire webapp contient l'ensemble des resources qui sont accessibles directement sur votre site. Il correspond à la racine d'un serveur web classique comme Apache ou IIS.
Créer votre première page index.html à partir du code de :
http://twitter.github.com/bootstrap/examples/fluid.html
Recharger votre serveur sur l'URL:
http://localhost:7070/index.html
La page devrait s'afficher mais il devrait manquer les CSS, JavaScript etc...
C'est un problème de chemins dans votre fichier html. Éditer votre fichier dans Eclipse pour indiquer le bon chemin vers votre répertoire bootstrap. Dans mon cas, il s'agissait de remplacer "../assets" par "bootstrap".
À ce stade cous devriez avoir une page avec une mise en page à la bootstrap. Cette page est statique. C'est un début.
Pages statiques
À partir du modèle, il est intéressant de monter plusieurs pages afin de voir à quoi pourra ressembler l'application finale. Chaque page est accessible à partir d'une URL ressemblant à :
http://localhost:7070/nomdefichier.html
Vous trouverez un projet maven avec un certain nombre de vues html statiques ici.
Aucun commentaire:
Enregistrer un commentaire