Bootstrap Introduction
Qu'est-ce que Bootstrap ?
Bootstrap est un framework front-end pour développer rapidement des applications Web et des sites Web. Bootstrap est basé sur HTML, CSS et JAVASCRIPT.
Historique
Bootstrap a été créé parTwitterparMark OttoetJacob ThorntonDéveloppé par. Bootstrap est un produit open source publié sur GitHub en août 2011.
Pourquoi utiliser Bootstrap ?
- Mobile-firstDepuis Bootstrap 3, le framework inclut des styles mobile-first dans toute la bibliothèque.
- Prise en charge des navigateursTous les principaux navigateurs prennent en charge Bootstrap.
- Facile à prendre en mainTant que vous avez des connaissances de base en HTML et CSS, vous pouvez commencer à apprendre Bootstrap.
- Design responsiveLe CSS responsive de Bootstrap peut s'adapter aux ordinateurs de bureau, aux tablettes et aux téléphones. Pour en savoir plus sur le design responsive, consultezDesign responsive de Bootstrap。
- Il fournit une solution propre et unifiée permettant aux développeurs de créer des interfaces.
- Il contient des composants intégrés puissants et faciles à personnaliser.
- Il propose également une personnalisation basée sur le Web.
- Il est open source.
Contenu du package Bootstrap
- Structure de baseBootstrap fournit une structure de base avec un système de grille, des styles de liens et un arrière-plan. Ceci seraStructure de base de Bootstrapexpliqué en détail dans la section.
- CSSBootstrap est livré avec les fonctionnalités suivantes : paramètres CSS globaux, styles pour les éléments HTML de base, classes extensibles et un système de grille avancé. Ceci seraCSS Bootstrapexpliqué en détail dans la section.
- ComposantsBootstrap inclut plus d'une douzaine de composants réutilisables pour créer des images, des menus déroulants, de la navigation, des alertes, des popovers, etc. Ceci seraComposants de mise en pageexpliqué en détail dans la section.
- Plugins JavaScriptBootstrap inclut plus d'une douzaine de plugins jQuery personnalisés. Vous pouvez inclure tous les plugins directement, ou les inclure un par un. Ceci seraPlugins Bootstrapexpliqué en détail dans la section.
- PersonnalisationVous pouvez personnaliser les composants de Bootstrap, les variables LESS et les plugins jQuery pour créer votre propre version.
Exemples en ligne
Le tutoriel Bootstrap de ce site contient des centaines d'exemples.
Vous pouvez utiliser notre éditeur en ligne pour modifier le code en ligne et cliquer sur le bouton Run pour voir le résultat.
Exemples Bootstrap
<div class="container">
<div class="jumbotron">
<h1>Ma première page Bootstrap</h1>
<p>Redimensionnez la fenêtre pour voir l'effet responsive !</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Colonne 1</h3>
<p>Ce que vous apprenez n'est pas seulement la technologie, mais aussi des rêves !</p>
<p>Peu importe la grandeur du rêve, il ne peut pas résister à votre persévérance insensée.</p>
</div>
<div class="col-sm-4">
<h3>Colonne 2</h3>
<p>Ce que vous apprenez n'est pas seulement la technologie, mais aussi des rêves !</p>
<p>Peu importe la grandeur du rêve, il ne peut pas résister à votre persévérance insensée.</p>
</div>
<div class="col-sm-4">
<h3>Colonne 3</h3>
<p>Ce que vous apprenez n'est pas seulement la technologie, mais aussi des rêves !</p>
<p>Peu importe la grandeur du rêve, il ne peut pas résister à votre persévérance insensée.</p>
</div>
</div>
</div>
Essayez-le »
Plus d’exemples
Exemples Bootstrap 2
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Nom</th>
<th>Rue</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna Awesome</td>
<td>Broome Street</td>
</tr>
<tr>
<td>2</td>
<td>Debbie Dallas</td>
<td>Houston Street</td>
</tr>
<tr>
<td>3</td>
<td>John Doe</td>
<td>Madison Street</td>
</tr>
</tbody>
</table>
</div>
Essayez-le »
Cliquez sur le bouton "Try it" pour voir comment cela fonctionne.
Autres extensions