Section courante

A propos

Section administrative du site

Les premiers pas avec la version 2

Télécharger

Avant de télécharger, assurez-vous d'avoir un éditeur de code (il est recommandé d'utiliser Sublime Text 2) et une certaine connaissance pratique du HTML et du CSS. Voici le lien de téléchargement :

https://github.com/twbs/bootstrap/archive/v2.3.2.zip

Structure du fichier

Dans le téléchargement, vous trouverez la structure et le contenu du fichier suivant, regroupant logiquement les ressources communes et fournissant des variantes compilées et minifiées.

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.min.css
  +-- js/
  |   +-- bootstrap.js
  |   +-- bootstrap.min.js
  +-- img/
      +-- glyphicons-halflings.png
      +-- glyphicons-halflings-white.png

Il s'agit de la forme la plus simple de Bootstrap : des fichiers compilés pour une utilisation rapide dans presque tous les projets Web. Il fournisse des fichiers CSS et JS compilés (bootstrap.*), ainsi que des fichiers 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 fichiers PNG.

Veuillez noter que tous les plugiciels JavaScript nécessitent l'inclusion de jQuery.

Qu'est-ce qu'il contient

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.

Liste des composantes

Les sections des composantes et de plugiciels JavaScript fournissent ensemble les éléments d'interface suivants :

Gabarit HTML de base

Après une brève introduction au contenu, nous pouvons nous concentrer sur l'utilisation de Bootstrap. Pour ce faire, nous utiliserons un gabarit HTML de base comprenant tout ce qui est mentionné dans la structure du fichier.

Voici maintenant un aperçu d'un fichier HTML typique :

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.      <title>Gabartit 101 de Bootstrap</title>
  5.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.      <!-- Bootstrap -->
  7.      <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  8.   </head>
  9.   <body>
  10.      <h1>Bonjour le 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 voilà ! Avec ces deux fichiers ajoutés, vous pouvez commencer à développer n'importe quel site ou application avec Bootstrap.



Dernière mise à jour : Mardi, le 15 octobre 2024