Amorcer

Commencer

Présentation du projet, de son contenu et comment démarrer avec un modèle simple.

La tête haute! Ces documents concernent la v2.3.2, qui n'est plus officiellement prise en charge. Découvrez la dernière version de Bootstrap !

1. Télécharger

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.

Télécharger compilé

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.

Télécharger Bootstrap

Source de téléchargement

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.

Télécharger la source d'amorçage

2. Structure du fichier

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.

3. Ce qui est inclus

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 .

Rubriques Documents

Échafaudage

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.

CSS de base

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.

Composants

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.

plugins javascript

Semblables aux composants, ces plugins JavaScript sont des composants interactifs pour des éléments tels que les info-bulles, les popovers, les modaux, etc.

Liste des composants

Ensemble, les sections Composants et Plugins JavaScript fournissent les éléments d'interface suivants :

  • Groupes de boutons
  • Listes déroulantes des boutons
  • Onglets de navigation, pilules et listes
  • Barre de navigation
  • Étiquettes
  • Insignes
  • En-têtes de page et unité de héros
  • Vignettes
  • Alertes
  • Barres de progression
  • Modaux
  • Listes déroulantes
  • Info-bulles
  • popovers
  • Accordéon
  • Carrousel
  • Taper à l'avance

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.

4. Modèle HTML de base

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 :

  1. <!DOCTYPE html>
  2. <html>
  3.   <tête>
  4.     <title> Modèle Bootstrap 101 </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.   </tête>
  7.   <corps>
  8.     <h1> Bonjour, monde ! </h1>
  9.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  10.   </body>
  11. </html>

Pour en faire un modèle Bootstrap , incluez simplement les fichiers CSS et JS appropriés :

  1. <!DOCTYPE html>
  2. <html>
  3.   <tête>
  4.     <title> Modèle Bootstrap 101 </title>
  5.     <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
  6.     <!-- Amorçage -->
  7.     <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "screen" >   
  8.   </tête>
  9.   <corps>
  10.     <h1> Bonjour, monde ! </h1>
  11.     <script src = "https://code.jquery.com/jquery.js" ></script> 
  12.     <script src = "js/bootstrap.min.js" ></script> 
  13.   </body>
  14. </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.

5. Exemples

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.

  • Modèle de démarrage

    Un document HTML barebones avec tous les CSS et JavaScript Bootstrap inclus.

  • Site de commercialisation de base

    Comportant une unité de héros pour un message principal et trois éléments de support.

  • Aménagement fluide

    Utilise notre nouveau système de grille fluide et réactif pour créer une mise en page liquide homogène.

  • Commercialisation étroite

    Modèle marketing mince et léger pour les petits projets ou les petites équipes.

  • Navigation justifiée

    Page marketing avec des liens de navigation de même largeur dans une barre de navigation modifiée.

  • S'identifier

    Formulaire de connexion Barebones avec des commandes de formulaire personnalisées plus grandes et une mise en page flexible.

  • Pied de page collant

    Épinglez un pied de page à hauteur fixe au bas de la fenêtre de l'utilisateur.

  • Carrousel jumbotron

    Un riff plus interactif sur le site de marketing de base avec un carrousel proéminent.

Et ensuite ?

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