Présentatoin de Bootstrap
Bootstrap est un cadre de développement front-end open source, créé par Mark Otto et Jacob Thornton chez Twitter. Il fournit une collection d'outils CSS et HTML pour simplifier la création de sites web réactifs et cohérents.
Évolutions du Framework
Les principales versions incluent Bootstrap 2, Bootstrap 3 et Bootstrap 4, chacune apportant des améliorations en termes de fonctionnalités et de design.
Obtenir Bootstrap
Pour une utilisation en production, il est recommandé de télécharger les fichiers minifiés. Les sources Less et Sass sont également disponibles pour les développeurs souhaitant personnnaliser le framework.
Intégration via CDN
Utiliser un réseau de diffusion de contenu (CDN) permet de charger rapidement les fichiers Bootstrap sans hébergement local. Voici un exemple d'intégration :
<!-- Feuille de style principale de Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<!-- Bibliothèque jQuery requise pour les composants JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Fichiers JavaScript de Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
Structure des Fichiers
La version pour production comprned un dossier avec des sous-dossiers pour les fichiers CSS, JavaScript et les polices d'icônes. Par exemple, le CSS minifié se trouve dans css/bootstrap.min.css, et les icônes dans le dossier fonts/.
Modèle de Base HTML
Un fichier HTML minimal pour démarrer avec Bootstrap peut être structuré comme suit :
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon Projet Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Bienvenue dans le monde de Bootstrap !</h1>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Compatibilité avec les Navigateurs
Navigateurs Mobiles
| Système | Chrome | Firefox | Safari |
|---|---|---|---|
| Android | Supporté | Supporté | Non applicable |
| iOS | Supporté | Supporté | Supporté |
Navigateurs de Bureau
| Système | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Mac | Supporté | Supporté | Non applicable | Supporté | Supporté |
| Windows | Supporté | Supporté | Supporté | Supporté | Non supporté |
Techniques de Compatibilité
Pour assurer le support des anciennes versions d'Internet Explorer, certaines polyfills peuvent être ajoutées. Par exemple, inclure une bibliothèque comme html5shiv.js pour les éléments HTML5 sur IE8, ou utiliser des méta-balises pour forcer le mode de rendu.