Les premiers pas avec la version 3

Télécharger

Le Bootstrap 3 propose quelques méthodes simples pour démarrer rapidement, chacune adaptée à un niveau de compétence et à un cas d'utilisation différents.

jsDelivr

Les gens de jsDelivr fournissent gracieusement un support CDN pour CSS et JavaScript de Bootstrap. Utilisez simplement ces liens jsDelivr :

Installer avec Bower

Vous pouvez également installer et gérer les polices de caractères, CSS, JavaScript et Less de Bootstrap à l'aide de Bower :

Installer avec npm

Vous pouvez également installer Bootstrap à l'aide de npm :

require('bootstrap') chargera tous les plugiciels jQuery de Bootstrap sur l'objet jQuery. Le module bootstrap lui-même n'exporte rien. Vous pouvez charger manuellement les plugiciels jQuery de Bootstrap individuellement en chargeant les fichiers /js/*.js sous le répertoire de niveau supérieur du paquet.

Le package.json de Bootstrap contient des métadonnées supplémentaires sous les clefs suivantes :

Installer avec Composer

Vous pouvez également installer et gérer Bootstrap avec Less, CSS, JavaScript et les polices de caractères à l'aide de Composer :

Autoprefixer requis pour Less/Sass

Le Bootstrap utilise Autoprefixer pour gérer les préfixes des fournisseurs CSS. Si vous compilez Bootstrap à partir de sa source Less/Sass et que vous n'utilisez pas notre Gruntfile, vous devrez intégrer vous-même Autoprefixer dans votre processus de construction. Si vous utilisez Bootstrap précompilé ou notre Gruntfile, vous n'avez pas à vous en soucier car Autoprefixer est déjà intégré dans notre Gruntfile.

Qu'est-ce qu'il contient

Bootstrap est téléchargeable sous deux formes, dans lesquelles vous trouverez les répertoires et fichiers suivants, regroupant logiquement les ressources communes et fournissant des variantes compilées et minifiées.

jQuery requis : Veuillez noter que tous les plugiciels JavaScript nécessitent l'inclusion de jQuery, comme indiqué dans le modèle de démarrage.

Bootstrap précompilé

Une fois téléchargé, décompressez le dossier compressé pour voir la structure du Bootstrap (compilé). Vous verrez quelque chose comme ceci :

bootstrap/
+-- css/
|   +-- bootstrap.css
|   +-- bootstrap.css.map
|   +-- bootstrap.min.css
|   +-- bootstrap.min.css.map
|   +-- bootstrap-theme.css
|   +-- bootstrap-theme.css.map
|   +-- bootstrap-theme.min.css
|   +-- bootstrap-theme.min.css.map
+-- js/
|   +-- bootstrap.js
|   +-- bootstrap.min.js
+-- fonts/
    +-- glyphicons-halflings-regular.eot
    +-- glyphicons-halflings-regular.svg
    +-- glyphicons-halflings-regular.ttf
    +-- glyphicons-halflings-regular.woff
    +-- glyphicons-halflings-regular.woff2	
	

Il s'agit de la forme la plus simple de Bootstrap : des fichiers précompilés pour une utilisation rapide dans presque tous les projets Web. Nous fournissons des fichiers CSS et JS compilés (bootstrap.*), ainsi que des fichiers CSS et JS compilés et minifiés (bootstrap.min.*). Les cartes sources CSS (bootstrap.*.map) sont disponibles pour une utilisation avec les outils de développement de certains navigateurs. Les polices de caractères de Glyphicons sont incluses, tout comme le thème Bootstrap en option.

Code source de Bootstrap

Le téléchargement du code source de Bootstrap comprend les ressources CSS, JavaScript et les polices de caractères précompilées, ainsi que les fichiers source Less, JavaScript et la documentation. Plus précisément, il comprend les éléments suivants et plus encore :

bootstrap/
+-- less/
+-- js/
+-- fonts/
+-- dist/
|   +-- css/
|   +-- js/
|   +-- fonts/
+-- docs/
    +-- examples/
	

Less/, js/ et fonts/ sont le code source de polices de caractères CSS, JS et d'icônes (respectivement). Le dossier dist/ inclut tout ce qui est répertorié dans la section de téléchargement précompilé ci-dessus. Le dossier docs/ inclut le code source de la documentation et des exemples/ d'utilisation de Bootstrap. Au-delà de cela, tout autre fichier inclus fournit un support pour les paquets, les informations de licence et le développement.

Compilation de CSS et JavaScript

Bootstrap utilise Grunt pour son système de build, avec des méthodes pratiques pour travailler avec le cadre d'application. C'est ainsi qu'il compile leur code, exécutons des tests, et bien plus encore.

Installation de Grunt

Pour installer Grunt, vous devez d'abord télécharger et installer node.js (incluant npm). npm signifie node packaged modules et constitue un moyen de gérer les dépendances de développement via node.js.

Ensuite, à partir de la ligne de commande :

• Installez grunt-cli globalement avec npm install -g grunt-cli.
• Accédez au répertoire racine /bootstrap/, puis exécutez npm install. npm examinera le fichier package.json et installera automatiquement les dépendances locales nécessaires y étant répertoriées.

Une fois terminé, vous pourrez exécuter les différentes commandes Grunt fournies à partir de la ligne de commande.

Commandes Grunt disponibles

Dépannage

Si vous rencontrez des problèmes lors de l'installation de dépendances ou de l'exécution de commandes Grunt, supprimez d'abord le répertoire /node_modules/ généré par npm. Ensuite, réexécutez npm install.

Gabarit de base

Commencez avec ce gabarit HTML de base ou modifiez ces exemples.

Copiez le code HTML ci-dessous pour commencer à travailler avec un document Bootstrap minimal :