Creer Un Site Web Avec Bootstrap

Voir au format PDF

Vous êtes ici : >> BOOTSTRAP / Creer Un Site Web Avec Bootstrap

Temps d'étude : 2h.

Niveau : Facile.

Tags : Creer Un Site Web Avec Bootstrap

Fichier(s) utile(s) pour ce cours :

bootstrap.rar

Créer un site web avec bootstrap !

Pour créer un site web avec Bootstrap, nous aurons besoin de garder à disposition les classes css prédéfinies, nous allons donc ouvrir la documentatiton officielle dans un nouvel onglet (sauf si vous connaissez déjà tout par coeur :p)

Haut de site

index.html

	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8" >
			<title>Mon Site avec Bootstrap</title>
			<link rel="stylesheet" href="css/bootstrap.css">
			<link rel="stylesheet" href="css/style.css">
			<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
			<script src="js/bootstrap.js"></script>
			<meta name="viewport" content="width=device-width, initial-scale=1">
		</head>
		<body>			
			<header>
				<div class="container"> <!-- Tout contenant se divise en 12 colonnes. #container doit etre present et il permet de centrer -->
					<div class="row">	<!-- .row : on utilise "row" dès lors que l'on souhaite faire une ligne. -->
						<div class="col-md-7 col-md-offset-1 bordureRouge"> <!-- col est colonne // md c'est middle (xs petit) // 7 est le nb de place prise sur les 12 disponible. -- col-md-offset-1 correspond a la marge de gauche de l'espace d'une colonne. -->
								<h1>
									<span class="glyphicon glyphicon-star"></span>
									<a href="index.html">Monnom Monprenom</a>
									<br>
									<small>Communication / Marketing / Digital</small>
								</h1>
						</div>
						<div class="col-md-3 bordureVerte"> <!-- col-md-3 je prends 3 places (sur les 12) -->
							<a href="fichier/cv.pdf">Telecharger mon CV</a><br>
							<a href="">Partagez</a>
						</div>
					</div>
					<div class="row"> <!-- row : une ligne. -->
						<div class="col-md-10 col-md-offset-1"> <!-- col-md-10 : je prends 10 places // col-md-offset-1 : marge de l'espace d'une colonne-->
							<nav class="navbar"> <!-- navbar marges en dessous le menu -->
								<ul class="nav nav-tabs nav-justified" role="tablist"> <!-- nav-justified permet de prendre l'espace totale en largeur, peut importe le nb de liens, c'est recalcule (tester en ajoutant 1 lien en+)-->
									<li><a href="index.html">Accueil</a></li> <!-- nav-tabs permet de mettre un trait en desosus et de donner un style "onglet". -->
									<li><a href="moncv.html">Mon CV</a></li><!-- nav permet de mettre un display block et faire en sorte qu'il prenne davantages de place. -->
									<li><a href="mesprojets.html">Mes Projets</a></li>
									<li><a href="contact.php">Contact</a></li>
								</ul>
							</nav>
						</div>
					</div>
				</div>
			</header>
		</body>
	</html>

Résultat
explications bootstrap

Quelques Explications (sur les classes bootstrap utilisées ci-dessus pour construire le haut de site)

A l'intérieur de la balise <header>, la zone <div class="container"> permet de centrer le contenu sur la page web et de travailler à l'intérieur du système 12 colonnes.

Une fois à l'intérieur du container, nous créons une <div class="row"> qui permet de déclarer une nouvelle ligne.

A l'intérieur de cette zone <div class="row">, nous prévoyons un emplacement de 7 places .col-md-7 avec 1 place de marge à gauche .col-md-offset-1
Le <span> présent à l'intérieur contient la classe .glyphicon glyphicon-star permettant d'afficher une icone à côté du titre et slogan du site.

A côté de cette première zone, nous y associons un deuxième emplacement .col-md-3 (3 places) contenant des liens.

L'utilisation à nouveau de <div class="row"> nous permet de déclarer une nouvelle ligne pour prévoir le menu de navigation.
Pour cela, nous n'utilisons qu'un seul emplacement de 10 places .col-md-10 avec 1 place de marge de chaque côté .col-md-offset-1.
La classe CSS .navbar permet d'appliquer une marge sous le menu.
La classe CSS .nav permet d'appliquer un display block sur le <ul>.
La classe CSS .nav-tabs permet de mettre un trait en dessous et de donner un style "onglet".
La classe CSS .nav .nav-tabs .nav-justified permet de prendre l'espace total en largeur, peu importe le nombre de liens, c'est recalculé.

Contenu de site

index.html

	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8" >
			<title>Mon Site avec Bootstrap</title>
			<link rel="stylesheet" href="css/bootstrap.css">
			<link rel="stylesheet" href="css/style.css">
			<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
			<script src="js/bootstrap.js"></script>
			<meta name="viewport" content="width=device-width, initial-scale=1">
		</head>
		<body>			
			<header>
				<div class="container">
					<div class="row">
						<div class="col-md-7 col-md-offset-1 bordureRouge">
								<h1>
									<span class="glyphicon glyphicon-star"></span>
									<a href="index.html">Monnom Monprenom</a>
									<br>
									<small>Communication / Marketing / Digital</small>
								</h1>
						</div>
						<div class="col-md-3 bordureVerte">
							<a href="fichier/cv.pdf">Telecharger mon CV</a><br>
							<a href="">Partagez</a>
						</div>
					</div>
					<div class="row">
						<div class="col-md-10 col-md-offset-1">
							<nav class="navbar">
								<ul class="nav nav-tabs nav-justified" role="tablist">
									<li><a href="index.html">Accueil</a></li>
									<li><a href="moncv.html">Mon CV</a></li>
									<li><a href="mesprojets.html">Mes Projets</a></li>
									<li><a href="contact.php">Contact</a></li>
								</ul>
							</nav>
						</div>
					</div>
				</div>
			</header>
			<section>
				<div class="container">
					<div class="row">
						<div class="col-md-7 col-md-offset-1">
							<div class="panel panel-default">
								<div class="panel-heading"><h2>Presentation</h2></div>
								<div class="panel-body">
									<div class="col-md-2">
										<img src="img/fiche.jpg">
									</div>
									<div class="col-md-10">
										<p class="lead">	
											Vous etes a la recherche d'une personne competente et efficace pour gerer vos projets web ?
										</p>
									</div>
									<div class="col-md-12">
										<hr>
										<p>Actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ...</p>
											<ul class="list-unstyled">
												<li>Redaction cahier des charges</li>
												<li>elaboration de votre design & Integration precise</li>
												<li>Administration sur CMS : Wordpress & Drupal</li>
												<li>Reflexion strategique, statistiques, referencement</li>
											</ul>
											<img src="img/graphique.png" width="200px">
										</p>
									</div>
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading"><h2>Actualites</h2></div>
								<div class="panel-body">
									<p>
										<em>
											17/06/2013 : Formation a l'IFOCOP @Paris.<br>
											15/05/2013 : Actualite 3 <br>
											12/03/2013 : Actualite 2<br>
											01/01/2013 : Actualite 1<br>
										</em>
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="panel panel-default">
								<div class="panel-heading"><h2>Qui suis-je ?</h2></div>
								<div class="panel-body">
									<p>
										Description en quelques lignes ... <br>
										Description en quelques lignes ... <br>
										Description en quelques lignes ... <br>
									</p>
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading"><h2>Experience</h2></div>
								<div class="panel-body">
									<p>
										<ul>
											<li>Experience 1 ... </li>
											<li>Experience 2 ... </li>
											<li>Experience 3 ... </li>
										</ul>
									</p>
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading"><h2>Contact</h2></div>
								<div class="panel-body">
									<p>
										Contact ... <br>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
		</body>
	</html>

Résultat
explications bootstrap

Quelques Explications (sur les classes bootstrap utilisées ci-dessus pour construire le milieu de site)

A l'intérieur de la balise <section>, la zone <div class="container"> permet de centrer le contenu sur la page web et de travailler à l'intérieur du système 12 colonnes.

Une fois à l'intérieur du container, nous créons une <div class="row"> qui permet de déclarer une nouvelle ligne.

A l'intérieur de cette zone <div class="row">, nous prévoyons un emplacement de 7 places .col-md-7 avec 1 place de marge à gauche .col-md-offset-1
Les classes présentes à l'intérieur sont .panel, .panel-default, .panel-heading, .panel-body

La classe CSS .panel permet d'appliquer de créer un cadre avec un effet "box".
La classe CSS .panel-default permet d'ajouter de l'ombre.
La classe CSS .panel-heading permet de donner une entete à notre cadre panel.
La classe CSS .panel-body permet d'appliquer du padding (marges intérieures) à l'intérieur du cadre.

Dans cette même zone de 7 places, nous recréons d'autres zones (une grille dans une grille).

Nous prévoyons un autre emplacement de 2 places .col-md-2 avec une image à l'intérieur
Et à côté, un emplacement de 10 places .col-md-10 avec un texte à l'intérieur
Cela prend 12 places à l'intérieur de la zone dans laquelle ils sont contenus, soit 12 places à l'intérieur des 7 places de leur parent.
La classe CSS .lead permet d'avoir un effet gras.

Un autre emplacement de 12 places (à l'intérieur des 7 places du parent) est déclaré, du coup il passe forcément à la ligne même sans l'utilisation de <div class="row"> car il n'a plus la place de se mettre à côté.
Une liste est déclarée avec la classe CSS list-unstyled qui permet d'eviter les puces (point noir) de la liste.
D'autres cadres utilisant les classes CSS ci-dessus sont déclarés pour avoir un effet 2 colonnes.

Voici les liens pour récupérer les deux images utilisées dans le cadre de ce site web. Cliquez ici : image1 & image2

Bas de site

index.html

	<!Doctype html>
	<html>
		<head>
			<meta charset="utf-8" >
			<title>Mon Site avec Bootstrap</title>
			<link rel="stylesheet" href="css/bootstrap.css">
			<link rel="stylesheet" href="css/style.css">
			<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
			<script src="js/bootstrap.js"></script>
		</head>
		<body>			
			<header>
				<div class="container">
					<div class="row">
						<div class="col-md-7 col-md-offset-1 bordureRouge">
								<h1>
									<span class="glyphicon glyphicon-star"></span>
									<a href="index.html">Monnom Monprenom</a>
									<br>
									<small>Communication / Marketing / Digital</small>
								</h1>
						</div>
						<div class="col-md-3 bordureVerte">
							<a href="fichier/cv.pdf">Telecharger mon CV</a><br>
							<a href="">Partagez</a>
						</div>
					</div>
					<div class="row">
						<div class="col-md-10 col-md-offset-1">
							<nav class="navbar">
								<ul class="nav nav-tabs nav-justified" role="tablist">
									<li><a href="index.html">Accueil</a></li>
									<li><a href="moncv.html">Mon CV</a></li>
									<li><a href="mesprojets.html">Mes Projets</a></li>
									<li><a href="contact.php">Contact</a></li>
								</ul>
							</nav>
						</div>
					</div>
				</div>
			</header>
			<section>
				<div class="container">
					<div class="row">
						<div class="col-md-7 col-md-offset-1">
							<div class="panel panel-default">
								<div class="panel-heading"><h2>Presentation</h2></div>
								<div class="panel-body">
									<div class="col-md-2">
										<img src="img/fiche.jpg">
									</div>
									<div class="col-md-10">
										<p class="lead">	
											Vous etes a la recherche d'une personne competente et efficace pour gerer vos projets web ?
										</p>
									</div>
									<div class="col-md-12">
										<hr>
										<p>Actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ... actuellement, je suis ..., je fais ...</p>
											<ul class="list-unstyled">
												<li>Redaction cahier des charges</li>
												<li>elaboration de votre design & Integration precise</li>
												<li>Administration sur CMS : Wordpress & Drupal</li>
												<li>Reflexion strategique, statistiques, referencement</li>
											</ul>
											<img src="img/graphique.png" width="200px">
										</p>
									</div>
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading"><h2>Actualites</h2></div>
								<div class="panel-body">
									<p>
										<em>
											17/06/2013 : Formation a l'IFOCOP @Paris.<br>
											15/05/2013 : Actualite 3 <br>
											12/03/2013 : Actualite 2<br>
											01/01/2013 : Actualite 1<br>
										</em>
									</p>
								</div>
							</div>
						</div>
						<div class="col-md-3">
							<div class="panel panel-default">
								<div class="panel-heading"><h2>Qui suis-je ?</h2></div>
								<div class="panel-body">
									<p>
										Description en quelques lignes ... <br>
										Description en quelques lignes ... <br>
										Description en quelques lignes ... <br>
									</p>
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading"><h2>Experience</h2></div>
								<div class="panel-body">
									<p>
										<ul>
											<li>Experience 1 ... </li>
											<li>Experience 2 ... </li>
											<li>Experience 3 ... </li>
										</ul>
									</p>
								</div>
							</div>
							<div class="panel panel-default">
								<div class="panel-heading"><h2>Contact</h2></div>
								<div class="panel-body">
									<p>
										Contact ... <br>
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</section>
			<footer>
				<div class="container"> <!-- #container : centre -->
					<div class="row"><!-- ligne -->
						<div class="col-md-10 col-md-offset-1"> <!-- je prends 10 places -->
							<hr>
							<a href="">Informations</a> -
							<a href="">Mentions Legales</a> -
							<a href="contact.php">Contact</a>
							<br>
							<p>(c) 2013 Conception et realisation par Nom Prenom. Tous droits reserves.</p>
						</div>
					</div>
				</div>
			</footer>
		</body>
	</html>

Résultat
explications bootstrap

Quelques Explications (sur les classes bootstrap utilisées ci-dessus pour construire le bas de site)

A l'intérieur de la balise <footer>, la zone <div class="container"> permet de centrer le contenu sur la page web et de travailler à l'intérieur du système 12 colonnes.

Une fois à l'intérieur du container, nous créons une <div class="row"> qui permet de déclarer une nouvelle ligne.

A l'intérieur de cette zone <div class="row">, nous prévoyons un emplacement de 10 places .col-md-10 avec 1 place de marge à gauche .col-md-offset-1
Nous y mettons simplement quelques liens et une phrase de texte.

Tous les éléments type <a>, <hr>, <p>, etc. bénéficient d'une légère retouche graphique prévue par bootstrap.

Voila pour la création d'une première page web avec l'aide de bootstrap ! comme vous le voyez, cela va plus vite puisqu'on écrit pas le code CSS, on ne fait qu'appeler des classes CSS contenant du code déjà prédéfini.
D'autre part, vous pouvez tenter de redimensionner votre fenêtre, vous verrez que votre page web est déjà responsive !

D'une manière générale, si vous avez un doute sur le comportement d'une classe ou sur son apport, vous pouvez :

Consulter la documentation officielle

Allez voir le code css du fichier bootstrap.css

L'observer avec firebug

La retirer du code pour voir ce que cela change à l'affichage, avant de la rétablir dans le code.

Theme et template préfait bootstrap.
Plusieurs thèmes préfaits existent, vous pouvez les récupérer et les observer à l'adresse officielle de bootstrap dans la partie Getting Started, voici quelques liens d'exemple :

BOOTSTRAP

1. Framework Bootstrap 2. Systeme De Grille 3. Creer Un Site Web Avec Bootstrap