Sommaire

Un exemple simple de mise en page

1. L’objectif

Nous allons créer une page simple qui sera alignée sur notre grille adaptative à 12 colonnes. Nous optimiserons le design adaptatif pour les écrans d’ordinateur de taille moyenne.

Vous pouvez télécharger et utiliser les sources de cet exemple dans le dossier Bootstrap-03-Grille/exemple-01.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 and media
queries --> 
   <!--[if lt IE 9]> 
     <script src="assets/js/html5shiv.js"></script> 
     <script src="assets/js/respond.min.js"></script> 
   <![endif]--> 
</head> 
<body> 
... 
<!-- Les liaisons aux scripts --> 
<script src="assets/js/jquery.js" type="text/javascript"></script>  ...