Bootstrap - Configuration de l'environnement

Il est très facile de configurer et de commencer à utiliser Bootstrap. Ce chapitre explique comment télécharger et configurer Bootstrap. Nous discuterons également de la structure du fichier Bootstrap et démontrerons son utilisation avec un exemple.

Télécharger Bootstrap

Vous pouvez télécharger la dernière version de Bootstrap à partir de https://getbootstrap.com/. Lorsque vous cliquez sur ce lien, vous verrez un écran comme ci-dessous -

Ici vous pouvez voir deux boutons -

Download Bootstrap- En cliquant dessus, vous pouvez télécharger les versions précompilées et minifiées de Bootstrap CSS, JavaScript et polices. Aucune documentation ou fichiers de code source d'origine ne sont inclus.
Download Source - En cliquant dessus, vous pouvez obtenir le dernier code source Bootstrap LESS et JavaScript directement depuis GitHub.

Si vous travaillez avec le code source non compilé de Bootstrap, vous devez compiler les fichiers LESS pour produire des fichiers CSS utilisables. Pour compiler les fichiers CSS dans LESS, Bootstrap soutient officiellement que Recess , qui est le Hinter CSS Twitter basé sur less.js .

Pour une meilleure compréhension et facilité d'utilisation, nous utiliserons la version précompilée de Bootstrap tout au long du didacticiel. Comme les fichiers sont respectés et réduits, vous n'avez pas à vous soucier à chaque fois d'inclure des fichiers séparés pour les fonctionnalités individuelles. Au moment de la rédaction de ce didacticiel, la dernière version (Bootstrap 3) a été téléchargée.

Structure des fichiers

Bootstrap précompilé

Une fois la version compilée Bootstrap téléchargée, extrayez le fichier ZIP, et vous verrez la structure de fichier / répertoire suivante -

Comme vous pouvez le voir, il existe des CSS et JS compilés (bootstrap. *), Ainsi que des CSS et JS compilés et minifiés (bootstrap.min. *). Les polices de Glyphicons sont incluses, car il s'agit du thème Bootstrap facultatif.

Code source Bootstrap

Si vous avez téléchargé le code source Bootstrap, la structure du fichier serait la suivante -

Les fichiers sous less / , js / et fonts / sont le code source des polices Bootstrap CSS, JS et icon (respectivement).
Le dossier dist / comprend tout ce qui est répertorié dans la section de téléchargement précompilée ci-dessus.
docs-assets / , examples / et tous les fichiers * .html sont de la documentation Bootstrap.

Modèle HTML

Un modèle HTML de base utilisant Bootstrap ressemblerait à ceci -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      
      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">
      
      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      
      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
      
   </head>
   
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>
      
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>
      
   </body>
</html>

Ici vous pouvez voir le jquery.js, bootstrap.min.js et bootstrap.min.cssfichiers inclus pour créer un fichier HTM normal dans le modèle bootstrap. Assurez-vous simplement d'inclure la bibliothèque jQuery avant d'inclure la bibliothèque Bootstrap.

Plus de détails sur chacun des éléments de ce morceau de code ci-dessus seront abordés dans le chapitre Présentation de Bootstrap CSS .

Exemple

Essayons maintenant un exemple utilisant le modèle ci-dessus. Essayez l'exemple suivant en utilisant l'option Démo en direct disponible dans le coin supérieur droit de l'exemple de code ci-dessous sur notre site Web -

<h1>Hello, world!</h1>

Dans tous les chapitres suivants, nous avons utilisé du texte factice du site https://www.lipsum.com/.