BootstrapBootstrap
Présentation du framework CSS gratuit Bootstrap
Bootstrap est essentiellement un fichier CSS. Il comporte de nombreuses classes que l'on peut utiliser directement dans les balises HTML.Bootstrap fut développé par Mark Otto et Jacob Thornton sur Twitter et définit comme produit open source en août 2011 sur la plateforme GitHub.
Bootstrap [GetBootstrap.com] est un peu plus qu'un Framework CSS puisqu'il propose des composants HTML et JavaScript ainsi que des plugins jQuery de qualité pour enrichir vos pages. Bootstrap comporte un système de grille simple et efficace pour mettre en ordre l'aspect visuel d'une page web. Il apporte du style pour les boutons, les formulaires, la navigation. Il permet ainsi de concevoir un site web rapidement et avec peu de lignes de code ajoutées. Voir notamment l'utilisation de Bootstrap dans l'éditeur Brackets
Télécharger et installer Bootstrap
Télécharger Bootstrap sur GetBootstrap.com. Choisissez le bouton "Download" qui correspond au titre "Compiled CSS and JS" afin de récupérer les seuls fichiers nécessaires au fonctionnement de Bootstrap.Le dossier téléchargé dist contient des fichiers avec différentes extensions :
- .map : fichier de cartographie de code source qui permet de reconstituer les fichiers sources originaux à partir de fichiers Sass ou Less
- .min : fichiers minifiés - épurés de tous commentaires, espaces, etc...
- .rtl : fichiers CSS right to left pour les langues se lisant de droite à gauche (arabe, hébreu, etc.)
- .grid : fichier CSS avec uniquement les classes pour les grilles
- .reboot.css : ajoute des classes au fichier de reset normalize.css (affichage homogène pour tous les navigateurs)
- .bundle : contient bootstrap.js ET la bibliothèque popper.js
- .utilities : fichier de classe CSS pour projet en Less
Le seul fichier nécessaire est bootstrap.min.css (ou bootstrap.css si vous êtes en phase de développement)
Déposez le fichier bootstrap.min.css dans votre site par FTP et faite ensuite un lien vers ce dernier dans le head de votre page d'accueil comme ceci :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mes-styles.css" rel="stylesheet">
</head>
<body>
Ici le contenu de votre site
</body>
</html>Notez que le code HTML ci-dessus utilise les dernières normes de conception et de développement. Cela signifie utiliser un doctype HTML5 et inclure une balise meta viewport pour des comportements réactifs appropriés. A ne pas négliger si vous voulez que Bootstrap fonctionne correctement.
Vous pouvez aussi utiliser les services d'un CDN Bootstrap [https://www.bootstrapcdn.com] comme ceci :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/
version/css/bootstrap.min.css" rel="stylesheet">
</head>Pour vérifier que les liens fonctionnent, affichez un bouton Bootstrap avec ce code :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mes-styles.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-success">succès</button>
</body>
</html>