Sommaire

Un exemple évolué de mise en page GRILLE ADAPTATIVE:Exemple évolué

1. L’objectif

Nous allons créer une page plus évoluée que la précédente. Nous réaliserons une mise en page optimisée pour les écrans d’ordinateur, de tablette et de smartphone.

Pour chaque type d’écran, les différents blocs constitutifs de notre mise en page auront des dispositions et des largeurs différentes.

Là encore la mise en page n’est pas design, mais ce n’est pas le but de ce chapitre. Nous voulons bien comprendre comment fonctionne la mise en page avec Bootstrap avant tout !

Vous pouvez télécharger et utiliser les sources de cet exemple dans le dossier Bootstrap-03-Grille/exemple-02.html.

2. Les liaisons à Bootstrap et aux JavaScript

Nous utilisons toujours la même structure de code HTML :

<!DOCTYPE html> 
<html lang="fr"> 
<head> 
   <title>Mon site avec Bootstrap</title> 
   <meta charset="UTF-8" /> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
   <!-- Liaisons aux fichiers css de Bootstrap --> 
   <link href="dist/css/bootstrap.min.css" rel="stylesheet" /> 
   <link href="dist/css/bootstrap-theme.min.css" rel="stylesheet" /> 
   <!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements ...