English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutoriel de base Bootstrap

Plugins Bootstrap

Configuration de l'environnement Bootstrap

L'installation de Bootstrap est très facile. Ce chapitre explique comment télécharger et installer Bootstrap, discute de la structure des fichiers Bootstrap et montre son utilisation à travers un exemple.

télécharger Bootstrap

Vous pouvez télécharger Bootstrap à partir de https://getbootstrap.com/docs/3.4/ Télécharger la dernière version de Bootstrap. Lorsque vous cliquez sur ce lien, vous verrez la page Web suivante :

Cliquez sur le lien "Télécharger Bootstrap" pour accéder à la page suivante :


Vous verrez deux boutons :

  • Télécharger Bootstrap：Télécharger Bootstrap. Cliquez sur ce bouton, vous pouvez télécharger la version précompilée et compressée de Bootstrap CSS, JavaScript et des polices. Ne contient pas de documentation et de fichiers de code source initiaux.

  • Télécharger la source：Télécharger le code source. Cliquez sur ce bouton, vous pouvez obtenir directement le code source le plus récent de Bootstrap LESS et JavaScript sur

Si vous utilisez le code source non compilé, vous devez compiler les fichiers LESS pour générer des fichiers CSS réutilisables. Pour compiler les fichiers LESS, Bootstrap officiellement ne prend en charge que Recess，c'est une base Twitter pour less.js Avis CSS.

Pour mieux comprendre et utiliser plus facilement, nous utiliserons la version précompilée de Bootstrap dans ce tutoriel.

Étant donné que les fichiers sont compilés et compressés, dans le développement fonctionnel indépendant, vous n'avez pas besoin de inclure ces fichiers indépendants à chaque fois.

Lors de la rédaction de ce tutoriel, la dernière version (Bootstrap 3）。

Structure des fichiers

Bootstrap précompilé

Lorsque vous téléchargez la version précompilée de Bootstrap, décompressez le fichier ZIP, vous verrez les fichiers suivants :/Structure du répertoire :

Comme indiqué sur la figure, vous pouvez voir les CSS et JS compilés (bootstrap.*）。Et cela inclut également les CSS et JS compilés et compressés (bootstrap.min.*）。Il contient également les polices de Glyphicons, qui est un thème optionnel de Bootstrap.

Code source de Bootstrap

Si vous avez téléchargé le code source de Bootstrap, la structure des fichiers sera comme suit :

  • less/、js/ et fonts/ Les fichiers sous le répertoire sont respectivement le code source CSS, JS et les polices d'icônes de Bootstrap.

  • dist/ Les dossiers contiennent les fichiers et dossiers énumérés dans la partie précompilée téléchargeable ci-dessus.

  • docs-assets/、examples/ et tous les *.html Le fichier est le document Bootstrap.

Modèle HTML

Un modèle HTML de base utilisant Bootstrap est présenté comme suit :

<!DOCTYPE html>
<html>
　　　<head>
　　　　　　<title>Modèle Bootstrap</title>
　　　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　　　　　<!--　Pour inclure Bootstrap　-->
　　　　　　<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/"bootstrap.min.css" rel="stylesheet">
　
　　　　　　<!--　HTML5　Shiv et Respond.js sont utilisés pour permettre à IE8　supportant HTML5éléments et media queries　-->
　　　　　　<!--　Attention : Si vous incluez par le biais de file://　　Le fichier Respond.js ne peut pas fonctionner si il est inclus　-->
　　　　　　<!--[if lt IE　9]>
　　　　　　　　　<script　src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5<script src="shiv.js">/script>
　　　　　　　　　<script　src="https://oss.maxcdn.com/libs/respond.js/1.3.0/<script src="respond.min.js">/script>
　　　　　　<![endif]-->
　　　</<head>
　　　<body>
　　　　　　<h1>Hello, world!</h1>
　
　　　　　　<!--　jQuery (jQuery est nécessaire pour les plugins JavaScript de Bootstrap)　-->
　　　　　　<script　src="https://code.jquery.com/jquery.js">/script>
　　　　　　<!--　Inclut tous les plugins compilés　-->
　　　　　　<script src="js/bootstrap.min.js"></script>
　　　</body>
</html>

Ici, vous pouvez voir qu'il contient jquery.js、bootstrap.min.js et bootstrap.min.css Fichier, utilisé pour transformer un fichier HTML standard en modèle utilisant Bootstrap.

Les détails de chaque élément dans le segment de code ci-dessus seront expliqués dans Aperçu du CSS Bootstrap Explication détaillée des sections

Exemple en ligne

Maintenant, essayons d'utiliser Bootstrap pour afficher "Hello, world!" :

　<h1>Hello, world!</h1>

Recommandation de Staticfile CDN

Recommandé en Chine pour utiliser la bibliothèque sur Staticfile CDN :

<!--　Nouveau fichier CSS central de Bootstrap　-->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/"bootstrap.min.css" rel="stylesheet">
　
<!--　Fichier jQuery. Assurez-vous de l'inclure avant bootstrap.min.js　-->
<script　src="https://cdn.staticfile.org/jQuery/2.1.1/jquery.min.js">/script>
　
<!--　Le fichier JavaScript central le plus récent de Bootstrap　-->
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

De plus, vous pouvez également utiliser les services CDN suivants :

Introduction au CSS BootstrapIntroduction à Bootstrap