Découvez les bases du plus célébre des frameworks CSS.
<!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>
Nous avons 2 méthodes pour lier nos fichiers :
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">
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">
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 |
