English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Dans ce tutoriel, vous apprendrez à utiliser Bootstrap 3 La version compilée crée un modèle de base de Bootstrap.
Ici, vous découvrirez à quel point il est facile de créer des pages Web avec Bootstrap. Avant de commencer, assurez-vous d'avoir un éditeur de code ainsi qu'une certaine connaissance de l'utilisation de HTML et CSS.
Si vous débutez dans le développement Web, veuillezCommencez ici à apprendre les bases de HTML»
Très bien, passons directement à l'essentiel.
Il y a deux versions disponibles pour le téléchargementBootstrap compiléetBootstrap sourceLes fichiers.Téléchargez ici les fichiers Bootstrap
Le téléchargement de la compilation contient des versions compressées et réduites de fichiers CSS et JavaScript, ainsi que des icônes au format de police, pour une développement Web plus rapide et plus facile, tandis que le code source contient tous les fichiers CSS et JavaScript en source originale ainsi que des copies locales des documents.
Pour mieux comprendre, nous nous concentrerons sur les fichiers Bootstrap compilés. Cela économisera votre temps, car vous n'aurez pas besoin de vous soucier de chaque fonction individuelle, y compris les fichiers individuels. Lorsque vous décidez de déplacer votre site vers un environnement de production, en raison de la taille des requêtes HTTP et des téléchargements plus petites, car il peut compiler et compresser les fichiers, il peut également améliorer les performances du site Web et économiser la bande passante précieuse.
Après avoir téléchargé Bootstrap compilé, décompressez le dossier compressé pour voir la structure. Vous trouverez les fichiers et le contenu suivants.
bootstrap/ |—— css/ | |—— bootstrap.css | |—— bootstrap.min.css | |—— bootstrap-theme.css | |—— bootstrap-theme.min.css |—— js/ | |—— bootstrap.js | |—— bootstrap.min.js |—— fonts/ | |—— glyphicons-halflings-regular.eot | |—— glyphicons-halflings-regular.svg | |—— glyphicons-halflings-regular.ttf | |—— glyphicons-halflings-regular.woff
Comme vous pouvez le voir, la version compilée de Bootstrap fournit des fichiers CSS et JS compilés (bootstrap.*)*)
fichiers de police glyphicons-halflings-regular.*Le dossier contient quatre fichiers de police ()). Ces fichiers de police contiennent des glyphicons Halflings.250 icônes.
Avis :C'est la forme la plus basique de Bootstrap, qui peut être utilisée rapidement dans tout projet Web. Notez que les plugins JavaScript de Bootstrap nécessitent l'inclusion de jQuery. Vous pouvez le faire icihttps://jquery.com/download/Téléchargez la dernière version de jQuery Formulaire.
Jusqu'à présent, vous avez compris la structure et l'utilisation des fichiers Bootstrap. Il est maintenant temps de vraiment utiliser Bootstrap. Dans cette section, nous allons créer un modèle Bootstrap de base, incluant tout ce que nous avons mentionné dans la structure du fichier.
Nous allons suivre les étapes suivantes étape par étape. À la fin de ce tutoriel, vous aurez créé un fichier HTML qui affichera le message "Hello world" dans un navigateur Web.
Ouvrez votre éditeur de code préféré et créez un nouveau fichier HTML. Commencez par une fenêtre vide, puis tapez le code suivant et enregistrez-le sous le nom de "basic.html" sur votre bureau.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Basic HTML File</title> </head> <body> <h1>Hello, world!</h1> </body> </html>Voyons un test‹/›
Avis :Incluez toujours le tag meta viewport dans la section document pour activer le zoom tactile et assurer une présentation correcte sur les appareils mobiles. Inclut également X-UA-Compatible avec le mode edge de meta marqueurs, ce qui permet à Internet Explorer d'afficher les pages web dans le mode le plus élevé disponible.
Pour définir ce fichier HTML comme modèle Bootstrap, il suffit d'ajouter les fichiers CSS et JS correspondants de Bootstrap. Vous devriez ajouter le fichier JavaScript à la fin de la page-Pour fermermarqueurs (c'est-à-dire) avant pour améliorer les performances du site web.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de Bootstrap de base</title> <link rel="stylesheet" type="text/css" href="/static/style/bootstrap.min.css"> <!-- Thème optionnel Bootstrap --> <link rel="stylesheet" href="/static/style/bootstrap-theme.min.css"> </head> <body> <h1>Hello, world!</h1> <script src="/static/script/jquery-1.11.3.min.js"></script> <script src="/static/script/bootstrap.min.js"></script> </body> </html>Voyons un test‹/›
Nous sommes tous prêts !Après avoir ajouté les fichiers CSS et JS de Bootstrap ainsi que la bibliothèque jQuery requise, nous pouvons commencer à développer tout site ou application en utilisant le cadre Bootstrap.
Maintenant, enregistrez le fichier sous le nom de "bootstrap-template.html
Attention :L'extension .html est importante-Certains éditeurs de texte (comme Notepad) enregistrent automatiquement l'extension .txt.
Ouvrez le fichier dans le navigateur. Naviguez vers votre fichier, puis double-cliquez dessus. Il s'ouvrira dans votre navigateur Web par défaut. (Sinon, ouvrez un navigateur et glissez le fichier dedans.)
Si vous ne souhaitez pas télécharger et héberger vous-même les fichiers de déclenchement ou jQuery, vous pouvez inclure les fichiers CSS et JavaScript de Bootstrap ainsi que les fichiers de bibliothèque jQuery JavaScript en utilisant les liens CDN (Content Delivery Network) gratuits fournis.
Les CDN offrent un avantage en termes de performance en réduisant le temps de chargement, car ils hébergent les fichiers Bootstrap sur plusieurs serveurs répartis dans le monde entier, et fournissent les fichiers aux utilisateurs à partir du serveur le plus proche.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Modèle de Bootstrap de base</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Thème optionnel Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>Voyons un test‹/›
Pour réaliser l'intégrité des ressources secondaires (SRI), dans Bootstrap
L'intégrité et l'attribut crossorigin ont été ajoutés au CDN. Il s'agit d'une fonction de sécurité qui, en s'assurant que les fichiers obtenus par votre site Web (à partir du CDN ou de tout autre endroit) sont livrés sans opération imprévue, réduit le risque d'attaque venant d'un CDN endommagé. Son principe consiste à vous permettre de fournir une hachage crypté qui doit correspondre au fichier obtenu.
Les attributs integrity et crossorigin ont été ajoutés à la CDN de l'initiationIntégrité des ressources(SRI). Il s'agit d'une fonctionnalité de sécurité qui vous permet de vous assurer que les fichiers obtenus par le biais du site (à partir d'un CDN ou d'any autre endroit) sont traités sans incident, réduisant ainsi le risque d'attaque contre le CDN. Il fonctionne en vous permettant de fournir un hachage cryptographique que les fichiers lus doivent correspondre.
Avis :Si les visiteurs de votre site ont déjà téléchargé les fichiers Bootstrap d'un même CDN lors de leur visite sur d'autres sites, ils seront chargés à partir du cache du navigateur plutôt que de nouveau téléchargés, ce qui réduit le temps de chargement.