Présentation du projet, de son contenu et comment démarrer avec un modèle simple.
Avant de télécharger, assurez-vous d'avoir un éditeur de code (nous recommandons Sublime Text 2 ) et quelques connaissances pratiques en HTML et CSS. Nous ne détaillerons pas les fichiers source ici, mais ils sont disponibles en téléchargement. Nous nous concentrerons sur le démarrage avec les fichiers Bootstrap compilés.
Le moyen le plus rapide de démarrer : obtenez les versions compilées et minifiées de nos CSS, JS et images. Pas de docs ou de fichiers source d'origine.
Obtenez les fichiers originaux pour tous les CSS et JavaScript, ainsi qu'une copie locale des documents en téléchargeant la dernière version directement depuis GitHub.
Dans le téléchargement, vous trouverez la structure et le contenu des fichiers suivants, regroupant logiquement les actifs communs et fournissant des variantes compilées et minifiées.
Une fois téléchargé, décompressez le dossier compressé pour voir la structure de Bootstrap (compilé). Vous verrez quelque chose comme ceci :
bootstrap / ├── css / │ ├── bootstrap . css │ ├── bootstrap . min . css ├── js / │ ├── bootstrap . js │ ├── bootstrap . min . js └── img / ├── glyphicons - halfelins . png └── glyphicons - halfelins - blanc . png
Il s'agit de la forme la plus basique de Bootstrap : des fichiers compilés pour une utilisation rapide dans presque tous les projets Web. Nous fournissons des CSS et JS compilés ( bootstrap.*
), ainsi que des CSS et JS compilés et minifiés ( bootstrap.min.*
). Les fichiers image sont compressés à l'aide d' ImageOptim , une application Mac pour compresser les PNG.
Veuillez noter que tous les plugins JavaScript nécessitent l'inclusion de jQuery.
Bootstrap est équipé de HTML, CSS et JS pour toutes sortes de choses, mais ils peuvent être résumés avec une poignée de catégories visibles en haut de la documentation Bootstrap .
Styles globaux pour le corps pour réinitialiser le type et l'arrière-plan, les styles de lien, le système de grille et deux mises en page simples.
Styles pour les éléments HTML courants tels que la typographie, le code, les tableaux, les formulaires et les boutons. Comprend également Glyphicons , un super petit jeu d'icônes.
Styles de base pour les composants d'interface courants tels que les onglets et les pilules, la barre de navigation, les alertes, les en-têtes de page, etc.
Semblables aux composants, ces plugins JavaScript sont des composants interactifs pour des éléments tels que les info-bulles, les popovers, les modaux, etc.
Ensemble, les sections Composants et Plugins JavaScript fournissent les éléments d'interface suivants :
Dans les futurs guides, nous pourrons parcourir ces composants individuellement plus en détail. En attendant, recherchez chacun d'entre eux dans la documentation pour savoir comment les utiliser et les personnaliser.
Avec une brève introduction au contenu, nous pouvons nous concentrer sur l'utilisation de Bootstrap. Pour ce faire, nous utiliserons un modèle HTML de base qui inclut tout ce que nous avons mentionné dans la structure du fichier .
Maintenant, voici un aperçu d'un fichier HTML typique :
- <!DOCTYPE html>
- <html>
- <tête>
- <title> Modèle Bootstrap 101 </title>
- <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
- </tête>
- <corps>
- <h1> Bonjour, monde ! </h1>
- <script src = "https://code.jquery.com/jquery.js" ></script>
- </body>
- </html>
Pour en faire un modèle Bootstrap , incluez simplement les fichiers CSS et JS appropriés :
- <!DOCTYPE html>
- <html>
- <tête>
- <title> Modèle Bootstrap 101 </title>
- <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
- <!-- Amorçage -->
- <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "screen" >
- </tête>
- <corps>
- <h1> Bonjour, monde ! </h1>
- <script src = "https://code.jquery.com/jquery.js" ></script>
- <script src = "js/bootstrap.min.js" ></script>
- </body>
- </html>
Et vous êtes prêt ! Avec ces deux fichiers ajoutés, vous pouvez commencer à développer n'importe quel site ou application avec Bootstrap.
Allez au-delà du modèle de base avec quelques exemples de mises en page. Nous encourageons les gens à itérer sur ces exemples et à ne pas simplement les utiliser comme résultat final.
Un document HTML barebones avec tous les CSS et JavaScript Bootstrap inclus.
Comportant une unité de héros pour un message principal et trois éléments de support.
Utilise notre nouveau système de grille fluide et réactif pour créer une mise en page liquide homogène.
Modèle marketing mince et léger pour les petits projets ou les petites équipes.
Page marketing avec des liens de navigation de même largeur dans une barre de navigation modifiée.
Formulaire de connexion Barebones avec des commandes de formulaire personnalisées plus grandes et une mise en page flexible.
Épinglez un pied de page à hauteur fixe au bas de la fenêtre de l'utilisateur.
Un riff plus interactif sur le site de marketing de base avec un carrousel proéminent.
Rendez-vous dans la documentation pour obtenir des informations, des exemples et des extraits de code, ou passez à l'étape suivante et personnalisez Bootstrap pour tout projet à venir.
Consultez la documentation Bootstrap Personnaliser le démarrage