installation de l'environnement Bootstrap

Télécharger Bootstrap

Vous pouvez choisir http://getbootstrap.com/ télécharger la dernière version de Bootstrap sur. Lorsque vous cliquez sur ce lien, vous verrez la page ci - dessous:

Télécharger bootstrap

Vous verrez deux boutons:

Télécharger le Bootstrap : Télécharger Bootstrap. Cliquez sur ce bouton, vous pouvez télécharger Bootstrap CSS, version compressée du JavaScript compilé pré et polices. Il ne contient pas les documents originaux et les fichiers de code source.
Source Download : télécharger le code source. Cliquez sur ce bouton, vous pouvez obtenir le dernier code source Bootstrap MOINS et JavaScript directement à partir du à partir.

Afin de mieux comprendre et plus pratique à utiliser, l'utilisation de la version compilée avant de Bootstrap .

Structure du fichier

précompilés Bootstrap

Lorsque vous téléchargez une version compilée de Bootstrap, décompressez le fichier ZIP, vous verrez le fichier suivant / structure de répertoire:

Compilé structure de fichier Bootstrap

Comme indiqué ci-dessus, on peut voir compilé CSS et JS (bootstrap. *), Et compilé CSS et JS comprimé (bootstrap.min. *). contient également la police Glyphicons, qui est un thème en option Bootstrap.

code source Bootstrap

Bootstrap si vous téléchargez le code source, la structure du fichier est la suivante:

structure source Bootstrap

moins / , JS / et polices de caractères / sous document sont la CSS Bootstrap, police JS et icône code source.
dist / dossier contient les fichiers et les documents énumérés ci - dessus Téléchargements précompilés dossier section.
Actif-docs / , examples / et tout le * .html fichier est la documentation Bootstrap.

HTML modèle

L'utilisation d'un modèle Bootstrap HTML de base est la suivante:

<! DOCTYPE HTML > 
< HTML > 
   < tête > 
      < title > sur le modèle Bootstrap </ title > 
      < Meta nom = "la fenêtre" Content = "width = largeur périphérique, initiale échelle = 1.0" > 
      <! - Introduit sur Bootstrap - -> 
      < Lien href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet" > 
 
      <! - HTML5 Shiv et permettre Respond.js soutien IE8 éléments HTML5 et les requêtes des médias -> 
      <! - Remarque: Si vous utilisez fichier:// importations fichier Respond.js, le fichier ne peut être lu effet-> 
      <! - [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]! -> 
   </ tête > 
   < body > 
      < h1 > Bonjour le monde! </ H1 > 
 
      <! - jQuery (Bootstrap的JavaScript插件需要引入jQuery) -> 
      < scénario src = "https://code.jquery.com/jquery.js" > </ scénario > 
      <!
      src = "/ js bootstrap.min.js" > </ scripts > 
   </ body > 
</ html >

recommandation StaticFile CDN

recommande à usage domestique utilisant la bibliothèque StaticFile CDN:

<- Nouveau fichier Bootstrap noyau CSS -> 
< Lien href = "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel = "stylesheet" > 
 
< ! - fichier jQuery. Assurez - vous de bootstrap.min.js avant l'introduction -> 
< script src = "https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" > </ script > 
 
<! - Dernières fichier core bootstrap JavaScript -> 
< script src = "https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js" > </ script >

La chose importante à dire trois fois:

fichier jQuery. Toujours mis en place avant bootstrap.min.js

fichier jQuery. Toujours mis en place avant bootstrap.min.js

fichier jQuery. Toujours mis en place avant bootstrap.min.js

En outre, vous pouvez également utiliser les services CDN suivants:

International a recommandé: https://cdnjs.com/