OUJOOD.COM
Qu'est-ce que Bootstrap 3 ?
Bootstrap 3 est un framework front-end open source qui facilite et accélère le développement web responsive. Créé par Twitter, il est devenu l'un des frameworks les plus utilisés au monde.
Bootstrap 3 combine des templates HTML et CSS prêts à l'emploi avec des composants JavaScript interactifs. Il inclut des styles pour les formulaires, boutons, tableaux, menus de navigation, carrousels d'images, modales, alertes et bien d'autres éléments d'interface.
L'un des principaux avantages de Bootstrap 3 est sa capacité à créer facilement des interfaces responsive qui s'adaptent automatiquement à tous les types d'écrans.
Qu'est-ce que le Responsive Web Design ?
Le responsive web design (conception web adaptative) est une approche qui permet aux sites web de s'ajuster automatiquement à la taille de l'écran de n'importe quel appareil : smartphones, tablettes, ordinateurs portables et écrans de bureau. Le contenu se réorganise de manière fluide pour offrir une expérience utilisateur optimale sur tous les supports.
Pourquoi utiliser Bootstrap 3 ?
Facilité d'utilisation : Toute personne ayant des connaissances de base en HTML et CSS peut commencer à utiliser Bootstrap 3. Pas besoin d'être un expert pour créer des interfaces professionnelles.
Design responsive : Le système de grille flexible de Bootstrap 3 permet à vos sites de s'adapter automatiquement aux smartphones, tablettes et ordinateurs de bureau sans effort supplémentaire.
Approche Mobile-First : Bootstrap 3 adopte une philosophie "mobile d'abord", où les styles pour appareils mobiles sont intégrés au cœur du framework, garantissant des performances optimales sur tous les appareils.
Compatibilité navigateurs : Bootstrap 3 fonctionne parfaitement avec tous les navigateurs modernes (Chrome, Firefox, Internet Explorer 9+, Edge, Safari et Opera), assurant une expérience cohérente pour tous vos utilisateurs.
Gain de temps : Avec ses composants prêts à l'emploi et sa documentation complète, Bootstrap 3 vous permet de développer plus rapidement sans sacrifier la qualité.
Où télécharger Bootstrap 3 ?
Il existe deux méthodes pour utiliser Bootstrap 3 dans vos projets web :
Méthode 1 - Téléchargement local : Si vous souhaitez héberger Bootstrap 3 sur votre propre serveur, rendez-vous sur getbootstrap.com et téléchargez les fichiers. Ensuite, incluez-les dans votre projet selon les instructions fournies.
Méthode 2 - CDN (recommandé) : Si vous préférez ne pas gérer les fichiers localement, vous pouvez inclure Bootstrap 3 directement depuis un CDN (Content Delivery Network). Cette méthode offre des avantages en termes de vitesse de chargement et de mise en cache.
Utiliser le CDN Bootstrap 3
Pour intégrer Bootstrap 3 via CDN, nous recommandons d'utiliser MaxCDN (ou BootstrapCDN), qui héberge gratuitement les fichiers CSS et JavaScript de Bootstrap 3.
MaxCDN offre une distribution rapide et fiable des ressources Bootstrap 3, optimisant ainsi les temps de chargement de votre site.
Code : HTML
<!-- Dernière version CSS Bootstrap 3 minimisée --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- Librairie jQuery (requis pour Bootstrap) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Dernière version JavaScript Bootstrap 3 minimisée --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Important : Bootstrap 3 nécessite jQuery pour fonctionner. Assurez-vous d'inclure jQuery avant le fichier JavaScript de Bootstrap.
Comment créer votre première page Web avec Bootstrap 3 ?
1. Utiliser le Doctype HTML5
Bootstrap 3 utilise des éléments HTML5 et des propriétés CSS3 modernes. Il est donc indispensable de déclarer le doctype HTML5 au début de votre document.
Code : HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Incluez toujours la déclaration <!DOCTYPE html> en première ligne, l'attribut lang="fr" pour définir la langue du contenu, et la balise <meta charset="utf-8"> pour un encodage correct des caractères.
2. Bootstrap 3 est conçu Mobile-First
L'une des innovations majeures de Bootstrap 3 est son approche "mobile d'abord". Les styles pour appareils mobiles sont intégrés au cœur du framework, puis adaptés progressivement pour les écrans plus larges.
Pour garantir un affichage optimal et permettre le zoom tactile sur mobile, vous devez ajouter la balise meta viewport suivante dans la section <head> :
<meta name="viewport" content="width=device-width, initial-scale=1">
Explication : L'attribut width=device-width indique au navigateur d'utiliser la largeur de l'écran de l'appareil. L'attribut initial-scale=1 définit le niveau de zoom initial à 100% lors du premier chargement de la page.
3. Les conteneurs Bootstrap
Bootstrap 3 requiert un élément conteneur pour envelopper le contenu de votre page et assurer un alignement et un espacement corrects.
Deux classes de conteneur sont disponibles :
- .container : Crée un conteneur responsive à largeur fixe avec des marges automatiques. La largeur maximale s'adapte selon les breakpoints définis (écrans SM, MD, LG, XL).
- .container-fluid : Crée un conteneur à pleine largeur qui occupe 100% de la largeur du viewport, idéal pour les designs edge-to-edge.
Remarque importante : Les conteneurs ne doivent jamais être imbriqués les uns dans les autres. Un conteneur ne peut pas être placé à l'intérieur d'un autre conteneur.
Voyons maintenant deux exemples de pages complètes :
Exemple avec la classe .container
Voici le code d'une page Bootstrap 3 complète utilisant un conteneur à largeur fixe responsive :
Code : HTML
<!DOCTYPE html> <html lang="fr"> <head> <title>Exemple Bootstrap 3 avec conteneur fixe</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Ma première page Bootstrap 3</h1> <p>Ceci est un exemple de contenu dans un conteneur à largeur fixe responsive.</p> </div> </body> </html>
Exemple avec la classe .container-fluid
Voici le code d'une page Bootstrap 3 complète utilisant un conteneur pleine largeur :
Code : HTML
<!DOCTYPE html> <html lang="fr"> <head> <title>Exemple Bootstrap 3 avec conteneur fluide</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Ma première page Bootstrap 3</h1> <p>Ceci est un exemple de contenu dans un conteneur fluide pleine largeur.</p> </div> </body> </html>
Chapitre précédent Chapitre suivant
Par carabde | Mis à jour le 25 décembre 2015