Tutoriel Bootstrap

Bootstrap

Découvez les bases du plus célébre des frameworks CSS.

HTML HTML5 CSS Dreamweaver PHP

Premier pas avec Bootstrap

Dans ce tutoriel, je vous propose de créer une page en HTML5 utilisant les composants boostrap.

Exemple de page

Vous trouverez toutes les explications dans les commentaires.

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<!-- Facultatif, permet de désactiver le mode de compatibilité d'IE-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Medias queries : On ouvre la fenêtre à la largeur de l'écran : width=device-width et on règle le zoom : initial-scale=1 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Les balises META ci dessus doivent être placées au début du head, tout autre contenu du head doit venir après ces balises -->
<title>Bootstrap Twitter</title>
<!-- Feuille de style CSS de Bootstrap -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="bower_components/bootstrap/dist/css//bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim et Respond.js pour IE8 permettent la compatibilité avec le HTML5 et les media queries -->
<!-- Attention : Respond.js ne fonctionne pas en local via le protocole file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

</head>
<body>
<h1>Hello world !</h1>

<!-- Nous mettons les plugins Javascripts en bas de page pour optimiser les temps de chargement -->
<!-- Plugin jQuery indispensable au bon fonctionnement de Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Les composants Jasvacripts de Boostrap -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

Lier le CSS et le Javascript

Nous avons 2 méthodes pour lier nos fichiers :

  • Soit en faisant pointer vers un dossier situé sur notre serveur, ex : notre dossier bower_components/bootstrap/dist/css/
  • Soit en faissant pointer sur un CDN

Exemple vers un dossier stocké sur mon serveur

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/font-awesome.min.css">
<script src="bower_components/jquery//jquery.min.js">

Qu'est ce qu'un CDN ?

Un content delivery network (CDN), ou réseau de diffusion de contenu, est constitué d’ ordinateurs reliés en réseau à travers Internet et qui coopèrent afin de mettre à disposition du contenu ou des données à des utilisateurs.
Source Wikipédia

Exemple vers un CDN

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">

Avantages et inconvénients

1. Stocké sur mon serveur

Avantages Inconvénients
Le fichier est modifiable  

2. Sur un serveur distant (CDN)

Avantages Inconvénients
Libére de la ressource et de la bande passante impose une requête DNS supplémentaire
Parallélisation des téléchargements (un CDN est sur plusieurs serveurs)  
Accélération du chargement  
Actualisation automatique des librairies  
Amélioration du référencement  

Ce site est liste dans la categorie Enseignement et formation : Formations professionnelles de l'annuaire Référencement et Dictionnaire

Frédéric création Jardin | Concinnatis | Au petit grandeur | Lestrem TP | Jerico | Solumetal | Comonmarket | Chez Beau J'ai | Beukenne Traiteur | PDP Recouvrement | Agroé - Achat groupé d'énérgie | Achat goupé Sorea | CE LM énergie | placedesenergies.com | Gazon de la Folie | Dépannage pôele à  pellet | Création site web Nord | Rénovation habitat Pas de calais | Cuisine Bois | Créperie à  Valenciennes | Repar Coudre | DNS service | Archis 2 | 3MI | Tests d'orientation professionnels - Solutests | Ircl | Leblan promotion | Formation webmaster, PAO, CAO / DAO | Formateur Web, référencement et PAO | Formateur bureautique |