Ce que j'apprends chaque jour

Créer son site web avec Bootstrap

 Decembre 2016
 

Avant de commencer


Nous allons voir comment réaliser un site web responsive, c'est-à-dire un site qui s'adapte à la taille de l'écran afin d'être d'une lecture facile et agréable quel que soit le type d'écran (smartphone, tablette ou PC).

Pour atteindre ces objectifs, nous utiliserons le Framework Bootstrap qui est le plus complet et le plus simple.

Pour ajouter du contenu aux pages préformatées, nous avons réalisé de multiples exemples et nous fournissons les codes HTML correspondants ainsi qu'éventuellement les codes CSS.

Notions de base.

Pour réaliser un site web il faut aussi avoir des notions de base concernant la construction des pages HTLML et des feuilles de style en CSS.

Pour acquérir ces notions, nous vous recommandons de visiter sur le web les tutoriels de w3school.com.

Définir le chemin relatif

Le chemin d'une page, d'une images etc. par rapport à votre page active est indiqué de la manière suivante :

  • "../" : signifie que l'on remonte d'un niveau, on sort d'un dossier.
  • "/": signifie que l'on descend d'un niveau.

Pour accéder à un dossier ou fichier de même niveau, le chemin est direct.

Soit les exemples suivants :

Un lien dans "index.htm" vers "autre_page.htm" : Il faut aller dans le dossier "pages" pour trouver le fichier, le lien sera donc : "pages/autre_page.htm"

Un lien de "autre_page.htm" vers "index.html" : Il faut sortir du dossier "pages" pour être à la même hauteur que le fichier, le chemin est donc : "../index.html"

Si vous avez plusieurs dossiers il faut mettre plusieurs "../" pour sortir des dossiers par exemple une image "bg.gif soit pour 2 niveaux :

"../../bg.gif"

Les outils

Nous allons avoir besoin des outils suivants :

  • Un éditeur de texte pour la conception des pages, ici nous utiliserons Notepad++.
  • Nous devons aussi avoir FileZilla qui est un client FTP, c'est-à-dire un logiciel permettant de se connecter à un serveur via le protocole de transfert de fichier.

Ces deux logiciels sont des logiciels libres et gratuits.

Pour télécharger Notepad++cliquez ici


Pour télécharger FilleZillacliquez ici



Installer Bootstrap

La méthode la plus simple pour démarrer avec Bootstrap est d'utiliser un modèle que nous allons télécharger sur le site Start Bootstap.

Pour ce tutoriel nous avons choisi de poursuivre avec une simple page afin de pouvoir la modifier à notre convenance.

Télécharger et installer le Template Bare de Start Bootstrap.

Après le téléchargement et l'installation sur votre disque dur, vous avez tous les éléments pour réaliser votre site Bootstrap :

  • Votre première page web "index.html"
  • Le dossier "css" avec les feuilles de style "bootstrap.css et bootstap.min.css"
  • Le dossier "js" avec les scripts "bootstrap.js, bootstrap.min.js et jquery.js"
 

Mise en page avec Bootstrap

À partir de la page index.html de notre Template Bare de Start Bootstrap, nous allons voir comment compléter cette page avec les différents codes inclus dans Bootstrap.

class="container"

Nous utiliserons .container (en rouge dans notre exemple) pour écrire nos pages, car la totalité de la page est utilisée pour le texte et l'image ce qui facilite la lecture sur les smartphones.

Code Html
<div class="container">
<h1>...</h1>
<p>...</p>
<h1>...</h1>
<br>
<div class="center-block text-center" style="max-width: 304px">
<img src="..." class="img-responsive center-block img-rounded" width="600" alt="">
<p><em>...</em></p>
</div>
<br>
<p>...</p>

class="container-fluid"

Nous utiliserons .container-fluid (en jaune dans notre exemple) pour insérer du contenu dans notre page. Cette insertion possède uniquement des marges à gauche et à droite.

Code Html
<div class="container-fluid">	
<h1>...</h1>
<p>...<p>	
<p>A l'intérieur de <code>.container-fluid</code></p>
</div>

Page web classique

Nous voulons réaliser une page avec deux colonnes et un pied de page.


Affichage sur smartphone


Affichage tablette et PC


<div class="row">
<div class="col-md-4">
<p>Texte de la colonne de gauche</p>
</div>
<div class="col-md-8"> 
<h1>Titre principal</h1>
<p>...</p>
<hr>
<h1>Titre 1</h1>
<p>Second texte de la colonne de droite</p>
<br>
</div>
<div class="col-md-12"> 
<footer class="container-fluid text-center">
<p>Pied de page</p>
</footer>
</div>
</div>

Insérer une grille comprenant 2 colonnes


Dans ce premier exemple sur les smartphones, nous allons avoir la colonne de gauche qui sera visualisée sous la colonne de droite.


Affichage sur smartphone


Affichage tablette et PC

 
<div class="row">
<div class="col-md-8 col-md-push-4">
<h4>...</h4>
<p></p>
</div>
<div class="col-md-4 col-md-pull-8">
<div class="well">
<h4>...</h4>
<p></p>
</div>
</div>
</div>
 

Dans ce deuxième exemple, nous allons voir que la colonne de droite sera sous la colonne de gauche lors de la visualisation dur smartphone.

Affichage sur smartphone


Affichage tablette et PC


<div class="row">
<div class="col-md-4">
<div class="well">
<h4>...</h4>
<p>...</p>
</div>	
</div>
<div class="col-md-8">
<h4>...</h4>
<p></p>
</div>
</div>

Insérer images et texte


Bootstrap permet l'insertion d'images directement et ainsi de les incorporer avec un texte. Pour nous distinguer des présentations classiques, avec l'ajoute de quelques codes CSS, nous pouvons améliorer cette présentation ...

Article complet 

Exemple du Carousel modifié et insertion d'une vidéo


Avec bootstrap il est possible d'insérer facilement un diaporama ou une vidéo dans sa page web, cependant il est possible d'y apporter des modifications significatives ...

Article complet