L'installation de bootstrap est très facile. Cet article est un résumé de mes études, ce qui est pratique pour les demandes futures et l'apprentissage. En même temps, j'espère vous aider.
1. Télécharger Bootstrap
Vous pouvez télécharger la dernière version de Bootstrap à partir de http://getbootstrap.com/. Lorsque vous cliquez sur ce lien, vous verrez une page Web comme celle-ci:
Vous verrez deux boutons:
Téléchargez Bootstrap: Téléchargez Bootstrap. Cliquez sur ce bouton et vous pouvez télécharger des versions compressées précompilées de Bootstrap CSS, JavaScript et FONTS. Les documents et les fichiers de code source d'origine ne sont pas inclus.
Téléchargez la source: Téléchargez le code source. Cliquez sur ce bouton et vous pouvez obtenir le dernier bootstrap moins et le code source JavaScript directement depuis.
Si vous utilisez du code source non compilé, vous devez compiler le fichier moins pour générer des fichiers CSS réutilisables. Pour compiler moins de fichiers, Bootstrap ne prend en charge que RECOL, qui est l'invite CSS moins basée sur Twitter.
Pour une meilleure compréhension et une meilleure utilisation, nous utiliserons une version précompilée de Bootstrap dans ce tutoriel.
Étant donné que les fichiers sont compilés et compressés, vous n'avez pas à inclure ces fichiers indépendants à chaque fois dans le développement fonctionnel indépendant.
Cette note d'étude est la dernière version (bootstrap 3).
2. Structure de fichiers
1. Bootstrap précompilé
Lorsque vous téléchargez la version compilée de Bootstrap et déziptez le fichier zip, vous verrez la structure de fichier / répertoire suivant:
Comme indiqué dans l'image ci-dessus, vous pouvez voir les CSS et JS compilés (bootstrap. *), Ainsi que les CS et JS comprimés compilés (bootstrap.min. *). Il comprend également la police de Glyphicons, un thème bootstrap en option.
2. Code source bootstrap
Si vous avez téléchargé le code source de bootstrap, la structure des fichiers ressemblera à ceci:
Les fichiers sous moins /, js / et polices / sont les codes source de Bootstrap CSS, JS et Icon Fonts, respectivement.
Le dossier DIST / contient les fichiers et dossiers répertoriés dans la section de téléchargement précompilée ci-dessus.
Docs-Assets /, Exemples /, et tous les fichiers .html sont des documents bootstrap.
3. Modèle HTML
Un modèle HTML de base utilisant Bootstrap ressemble à ceci:
<! DocType Html> <html> <adref> <tight> Template bootstrap </ title> <meta name = "Viewport" content = "width = device-width, initial-scale = 1.0"> <! - introduisant bootstrap -> <lien href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "Stylesheet"> <! - HTML5 Shim et réponds.js sont utilisés pour activer IE8 pour soutenir HTML5 Elements and Media Queries -> <! Le fichier ne peut pas avoir d'effet -> <! - [si 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> Bonjour, World! </ H1> <! - JQUERY (BOOTSTRAP Javascript Plugrin a besoin d'introduire JQQuery) - <! 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 des fichiers jQuery.js, bootstrap.min.js et bootstrap.min.css qui sont utilisés pour faire d'un fichier HTML régulier un modèle qui utilise Bootstrap.
Iv. Exemples
Essayons maintenant de produire "Bonjour, monde!" Utilisation de bootstrap:
<! Doctype html> <html> <éad- head> <itle> Essayez l'instance bootstrap en ligne </ title> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" REL = "StyleSheet"> <script src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> </ script> <script src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootsstrap.min.js"> </dcript> monde! </h1> </body> </html>
<! - NOUVEAU Fichier CSS Bootstrap Core -> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "Stylesheet"> <! - Fichier de thème optionnel Bootstrap (non généralement utilisé) -> <script src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"> </ script> <! - Fichier jQuery. Assurez-vous de vous présenter -> <script src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> <! - Le dernier fichier JavaScript de Bootstrap Core -> <script src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </ script>
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de chacun et à la construction correcte de l'environnement d'installation de bootstrap.