« Un petit groupe de développeurs et moi-même nous sommes réunis pour concevoir et créer un nouvel outil interne et avons vu une opportunité d’en faire plus. Nous nous sommes vus construire quelque chose de plus substantiel qu’un autre outil interne à travers ce processus. Des mois plus tard, nous nous sommes retrouvés avec une première version de Bootstrap pour documenter et partager des modèles de conception et des actifs communs au sein de l’entreprise.
La déclaration ci-dessus a été faite par Mark Otto, l’un des développeurs de Bootstrap. Jacob Thornton, un autre développeur, et ils ont tous deux travaillé dans l’organisation Twitter, qui est un site Web de médias sociaux populaire. Cependant, même si nous voyons un beau paysage en tant qu’utilisateur final, l’histoire diffère pour les développeurs chargés de le construire. Un site Web consulté par des millions de personnes chaque jour devait être (ou devait être) parfait pour chacun.
Lorsqu’un site Web comme Twitter est construit, de nombreuses équipes contribuent dans leurs domaines d’expertise afin que tout soit impeccable. Mais un code d’une équipe peut gêner le code d’une autre, ou la norme suivie par une équipe peut différer des autres, ce qui peut créer des incohérences, augmentant le temps de maintenance. C’était le problème rencontré par Mark et Jacob, et ils voulaient une solution qui pourrait régler rapidement ces problèmes sans passer par des protocoles lourds. Par conséquent, Bootstrap est né en tant qu’ensemble standard de règles pour le développement Web.
Sa création en fait une partie intégrante du développement Web et un cadre obligatoire pour un développeur Web à apprendre. Ce guide de test d’amorçage vous aidera à améliorer vos compétences et à développer et tester des sites Web plus rapidement et plus efficacement.
Qu’est-ce que Bootstrap ?
Bootstrap est un framework CSS gratuit et open source parmi les meilleurs frameworks CSS qui aide à créer un site Web mobile et réactif en fournissant une riche bibliothèque aux développeurs. Cette bibliothèque contient des fonctions JavaScript et CSS prédéfinies que les développeurs peuvent utiliser directement. Tous les développeurs de code écrivant selon les règles Bootstrap seront automatiquement réactifs. Ainsi, vous n’avez pas à déployer d’efforts supplémentaires pour obtenir le même résultat.
Bootstrap est facile à apprendre et gratuit à utiliser, c’est-à-dire que son code est disponible sur GitHub, qui, en décembre 2022, est la quatrième bibliothèque la plus étoilée et le quatorzième projet le plus étoilé.
Que contient Bootstrap ?
Bootstrap contient de nombreuses fonctions CSS, SCSS et JavaScript prédéfinies dans sa bibliothèque. En tant que développeurs, nous n’avons qu’à les étendre pour modifier ou ne rien faire pour appliquer les effets définis à l’aide de classes (ou parfois directement sans classe, comme ces règles qui fonctionnent sur le corps ou la racine).
Écrivons un petit morceau de code en HTML qui utilise une classe Bootstrap comme suit :
<em><center>
<br><br>
<p class="text-success"> This is to see Bootstrap class </p> <br>
</center></em>Nous utilisons la classe « text-success » ici, et aucun autre CSS n’est appliqué. La sortie de ce code est la suivante :
Note: le texte est devenu vert sans utiliser de couleurs. Comment cela peut-il être vérifié en cliquant avec le bouton droit sur la page et en choisissant le « Inspecter » option:
Nous pouvons voir que la classe « text-success » était responsable de l’application des couleurs CSS modernes, et le code de couleur en hexadécimal est « #3c763d ». Sur la droite, nous voyons le texte écrit sous la forme « text-emphasis.less:4 », ce qui signifie que le code de text-success est écrit dans ce fichier sur la ligne numéro quatre. Survolez ce texte pour obtenir l’emplacement du fichier Bootstrap :
Cliquez sur le texte pour obtenir le code complet de la classe « text-success : »
Inversement, nous pouvons explorer la bibliothèque complète sur leur page officielle GitHub. Dans ces fichiers, vous obtiendrez les différentes variables dont les valeurs sont décidées qui sont ensuite appliquées sur la page Web :
Un grand nombre des variables ci-dessus sont initialisées à l’aide de variables CSS. N’oubliez pas non plus que le même effet peut ne pas toujours être réel avec la même classe que l’héritage, et la priorité prend le pouvoir lorsque nous implémentons divers éléments sur la page Web.
La vie avant Bootstrap
Dans cette courte section, permettez-moi de souligner l’importance de Bootstrap en remplaçant le code Bootstrap par du code conventionnel. En d’autres termes, comment nous avons obtenu les résultats avant la naissance de Bootstrap.
Nous allons créer un petit formulaire de connexion pour le site Web dans cette démonstration :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>The contain style property</title>
<style>
* {
box-sizing: border-box;
}
body {
font-size: 15px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 1.42857143;
}
label {
display: inline-block;
max-width: 70%;
margin-bottom: 5px;
font-weight: 700;
}
.muted-text {
color: #777;
font-size: 13px;
}
.box-class {
padding-right: 275px;
padding-left: 275px;
margin-right: auto;
margin-left: auto;
}
.inputblock {
margin-bottom: 15px;
}
input {
width: 100%;
height: 40px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px\9;
width: 1.5%;
line-height: normal;
box-sizing: border-box;
padding: 0;
font-family: inherit;
font-size: inherit;
vertical-align: middle;
}
button {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-image: none;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
font: inherit;
}
</style>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<center>
<br><br>
<div class = "box-class">
<form>
<div class = "inputblock">
<label for="email">Email:</label><br>
<input type="email" class="" id="email" placeholder="Enter Your Email Address">
<small id="emailcation" class="muted-text">We'll never share your email with anyone else.</small>
</div>
<div class = "inputblock">
<label for="password">Password</label><br>
<input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>
<div class = "inputcheck">
<input type="checkbox" id="tnccheckbox">
<label for= "tnccheckbox">I agree to terms.</label>
</div>
<button type="submit">Submit</button>
</form>
</div>
</center>
</body>
</html>Sortir
Modifions maintenant un peu le code et voyons comment la même page peut être obtenue en utilisant Bootstrap :
<body>
<center>
<br><br>
<div class="container">
<form>
<div class="form-group">
<label for="emaillabel">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter Your Email Address">
<small id="emailcation" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="passwordlabel">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="tnccheckbox">
<label class="form-check-label" for="tnclabel">I agree to terms.</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</center>
</body>Sortir
Prenez juste une minute et observez les différences entre les deux codes. Vous remarquerez à quel point il est simple et concis d’écrire du code dans Bootstrap. Classiquement, il était également difficile de garder une trace des propriétés CSS affectées lors de la construction de la page. Plus de propriétés signifie plus de collisions entre les éléments. Bootstrap résout également ce problème ; par conséquent, il devient essentiel d’effectuer des tests Bootstrap, ce qui est visible dans l’exemple ci-dessus.
Pourquoi devrions-nous utiliser Bootstrap ?
Les avantages ci-dessus mentionnés dans l’article sont les plus attrayants qui vous encouragent à adopter Bootstrap dans votre prochain projet. Mais cela ne s’arrête pas à la conception et à la réactivité axées sur le mobile. L’adoption de ce cadre présente quelques avantages supplémentaires, et ils méritent d’être pris en compte :
- Écriture de code plus rapide: Réduit le temps d’écriture du code en prédéfinissant des classes et des fonctions.
- Conception axée sur le mobile: fonctionne d’abord sur mobile, de sorte que les développeurs n’ont pas à se soucier autant des appareils mobiles.
- Personnalisable: Aucun code Bootstrap n’est forcé. Un développeur peut modifier n’importe quelle classe et code sur n’importe quel élément. Cela peut être fait via un style CSS explicite ou des fonctions JavaScript.
- Règles standardisées et acceptées: Il est accepté dans le monde entier comme une bibliothèque CSS standard pour la personnalisation des pages Web qui aide à collaborer avec d’autres membres de la communauté à partir de différents endroits.
- Intégration facile: Extrêmement facile à intégrer en ajoutant une seule ligne de code sur la page Web.
- Open source: Un autre avantage d’être open-source est que quelqu’un vous aidera toujours lorsque vous êtes bloqué.
- Documentation riche: Pour quelqu’un qui cherche à se lancer dans Bootstrap, de nombreuses documentations riches (y compris les officielles) sont disponibles.
Contenu de la bibliothèque Bootstrap
Cette section est destinée aux développeurs qui souhaitent étudier la structure des répertoires et les fichiers inclus dans la bibliothèque.
Note: la connaissance de la structure des répertoires n’est pas obligatoire pour implémenter Bootstrap et créer une page Web en l’utilisant.
Le code source de Bootstrap ressemble à ceci :
bootstrap/
├── dist/
│ ├── css/
│ ...