Installation de Bootstrap
Sommaire
- 1- Objectifs
- 2- Présentation
- 3- Inclure Bootstrap dans vos pages
- 3.1- Télécharger la bibliothèque Bootstrap depuis le site Bootstrap
- 3.2- Inclure Bootstrap depuis un site externe
- 3.3- Le site bootstrap CDN fournit les fichiers bootstrap .css et .js : https://www.bootstrapcdn.com
- 3.4- Google fournit les fichiers jquery .js : https://developers.google.com/speed/libraries/
- 3.4.1- Sommaire du cours Bootstrap
Installation de Bootstrap
-
Objectifs
- Être capable d’installer et de travailler avec Bootstrap.
-
Présentation
- Bootstrap est une infrastructure frontale gratuite pour un développement Web plus rapide et plus facile
- Bootstrap comprend des modèles de conception basés sur HTML et CSS pour la typographie, les formulaires, les boutons, les tableaux, la navigation, les modaux, les carrousels d’images et de nombreux autres, ainsi que des plugins JavaScript optionnels.
- Bootstrap vous donne également la possibilité de créer facilement des conceptions réactives
-
Inclure Bootstrap dans vos pages
- Il existe deux méthodes pour inclure Bootstrap dans vos pages.
-
Télécharger la bibliothèque Bootstrap depuis le site Bootstrap
- La première chose à faire est de se rendre sur le site officiel du Bootstrap. Une fois que nous sommes sur la page de démarrage du site, trois options de téléchargement s’offrent à nous.
-
Inclure Bootstrap depuis un site externe
- Le plus simple consiste à faire référence au fichier
Bootstrapsur un CDN (pour Content Delivery Network). - Constitués d’ordinateurs reliés en réseau via Internet, ces éléments d’infrastructure coopèrent pour mettre à disposition aussi vite que possible la bibliothèque Bootstrap.
- Il y a des avantages à utiliser un CDN:
- Libération de ressources et de la bande passante sur son propre serveur ;
- Parallélisation des téléchargements (un CDN est sur plusieurs serveurs) ;
- Accélération du chargement ;
- Diminution de la latence ;
- Actualisation automatique des librairies ;
- Amélioration du référencement…
- Sur le site de Bootstrap, si vous descendez un peu. Vous trouverez un "Modèle de départ"qui contient la page suivante :
-
Le site bootstrap CDN fournit les fichiers bootstrap .css et .js : https://www.bootstrapcdn.com
- Bootstrap CDN pour le bootstrap.css
-
Google fournit les fichiers jquery .js : https://developers.google.com/speed/libraries/
- Bootstrapcdn pour le bootstrap.js : https://www.bootstrapcdn.com
- Google pour jquery.js : https://developers.google.com/speed/libraries/
- Assurez-vous que vos pages sont configurées avec les normes de conception et de développement les plus récentes. Cela signifie qu’il est nécessaire d’utiliser un doctype HTML5 et d’inclure une balise méta viewport pour des comportements réactifs appropriés. Rassemblez tout et vos pages devraient ressembler à ceci:
- Il vous suffit simplement de sélectionner le code et de le coller dans votre éditeur et vous êtes prêt à utiliser Bootstrap.
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstr
ap.min.css" rel="stylesheet"> <script
src="https://code.jquery.com/jquery-1.11.2.min.js"> </script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap
.min.js"></script> <!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>