Boîte à outils frontale puissante, extensible et riche en fonctionnalités. Créez et personnalisez avec Sass, utilisez un système de grille et des composants prédéfinis et donnez vie à vos projets avec de puissants plug-ins JavaScript.
Actuellement v5.2.1 · Télécharger · Docs v4.6.x · Toutes les versions
Passez directement à la construction avec Bootstrap : utilisez le CDN, installez-le via le gestionnaire de packages ou téléchargez le code source.
Installez les fichiers source Sass et JavaScript de Bootstrap via npm, RubyGems, Composer ou Meteor. Les installations gérées par package n'incluent pas la documentation ou nos scripts de construction complets. Vous pouvez également utiliser notre référentiel de modèles npm pour générer rapidement un projet Bootstrap via npm.
npm install [email protected]gem install bootstrap -v 5.2.1Lisez nos documents d'installation pour plus d'informations et des gestionnaires de packages supplémentaires.
Lorsque vous avez seulement besoin d'inclure le CSS ou le JS compilé de Bootstrap, vous pouvez utiliser jsDelivr . Voyez-le en action avec notre démarrage rapide simple ou parcourez les exemples pour démarrer votre prochain projet. Vous pouvez également choisir d'inclure Popper et notre JS séparément .
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
Bootstrap utilise Sass pour une architecture modulaire et personnalisable. Importez uniquement les composants dont vous avez besoin, activez les options globales telles que les dégradés et les ombres, et écrivez votre propre CSS avec nos variables, cartes, fonctions et mixins.
Importez une feuille de style et c'est parti pour les courses avec toutes les fonctionnalités de notre CSS.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
En savoir plus sur nos options Sass globales .
Le moyen le plus simple de personnaliser Bootstrap : n'incluez que le CSS dont vous avez besoin.
// Functions first
@import "../node_modules/bootstrap/scss/functions";
// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
En savoir plus sur l'utilisation de Bootstrap avec Sass .
Bootstrap 5 évolue avec chaque version pour mieux utiliser les variables CSS pour les styles de thème globaux, les composants individuels et même les utilitaires. Nous fournissons des dizaines de variables pour les couleurs, les styles de police et bien plus à un :rootniveau pour une utilisation n'importe où. Sur les composants et les utilitaires, les variables CSS sont limitées à la classe concernée et peuvent être facilement modifiées.
Utilisez n'importe laquelle de nos variables globales:root pour écrire de nouveaux styles. Les variables CSS utilisent la var(--bs-variableName)syntaxe et peuvent être héritées par des éléments enfants.
.component {
color: var(--bs-gray-800);
background-color: var(--bs-gray-100);
border: 1px solid var(--bs-gray-200);
border-radius: .25rem;
}
.component-header {
color: var(--bs-purple);
}Remplacez les variables globales, de composant ou de classe utilitaire pour personnaliser Bootstrap comme vous le souhaitez. Pas besoin de redéclarer chaque règle, juste une nouvelle valeur de variable.
body {
--bs-body-font-family: var(--bs-font-monospace);
--bs-body-line-height: 1.4;
--bs-body-bg: var(--bs-gray-100);
}
.table {
--bs-table-color: var(--bs-gray-600);
--bs-table-bg: var(--bs-gray-100);
--bs-table-border-color: transparent;
}Nouveau dans Bootstrap 5, nos utilitaires sont désormais générés par notre API Utility . Nous l'avons conçu comme une carte Sass riche en fonctionnalités qui peut être personnalisée rapidement et facilement. Il n'a jamais été aussi facile d'ajouter, de supprimer ou de modifier des classes utilitaires. Rendez les utilitaires réactifs, ajoutez des variantes de pseudo-classe et donnez-leur des noms personnalisés.
En savoir plus sur les utilitaires Explorez les composants personnalisés
// Create and extend utilities with the Utility API
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
Ajoutez facilement des éléments masqués basculables, des menus modaux et hors canevas, des popovers et des info-bulles, et bien plus encore, le tout sans jQuery. JavaScript dans Bootstrap est d'abord HTML, ce qui signifie que l'ajout de plugins est aussi simple que l'ajout d' dataattributs. Besoin de plus de contrôle ? Incluez des plugins individuels par programmation.
Pourquoi écrire plus de JavaScript quand vous pouvez écrire du HTML ? Presque tous les plugins JavaScript de Bootstrap disposent d'une API de données de première classe, vous permettant d'utiliser JavaScript simplement en ajoutant des dataattributs.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</div>
En savoir plus sur notre JavaScript en tant que modules et sur l'utilisation de l'API programmatique .
Bootstrap propose une douzaine de plugins que vous pouvez déposer dans n'importe quel projet. Déposez-les tous en même temps ou choisissez uniquement ceux dont vous avez besoin.
Bootstrap Icons est une bibliothèque d'icônes SVG open source contenant plus de 1 500 glyphes, avec d'autres ajoutés à chaque version. Ils sont conçus pour fonctionner dans n'importe quel projet, que vous utilisiez Bootstrap lui-même ou non. Utilisez-les comme SVG ou polices d'icônes - les deux options vous offrent une mise à l'échelle vectorielle et une personnalisation facile via CSS.
Faites passer Bootstrap au niveau supérieur avec des thèmes premium du marché officiel des thèmes Bootstrap . Les thèmes sont construits sur Bootstrap en tant que leurs propres frameworks étendus, riches en nouveaux composants et plugins, documentation et puissants outils de construction.
