Dans cet article, nous apprenons principalement sur l'histoire, les fonctionnalités, les utilisations de Boostrap et pourquoi Boostrap a été choisi pour développer nos projets Web.
Points clés pour l'apprentissage:
1. Bootstrap Présentation
2. Bootstrap Fonctions
3. Bootstrap Structure
4. Créez la première page
5. Diverses préparations pour apprendre
1. Aperçu de bootstrap
Bootstrap est un cadre open source basé sur HTML, CSS et JavaScript développé par deux ingénieurs techniques de Twitter (le plus grand Weibo du monde). Le code Framework est simple et visuellement beau, et peut être utilisé pour créer rapidement et simplement des exigences de la page Web en fonction des PC et des appareils mobiles.
En juin 2010, les ingénieurs à l'intérieur de Twitter ont résolu le problème de la collaboration et de l'unification dans les tâches de développement frontal. Après diverses solutions, Bootstrap a finalement été confirmé et publié en août 2011. Après une longue période d'itération et de mise à niveau, le projet d'origine axé sur CSS s'est transformé en un cadre open source avec un web frontal multi-fonctionnel avec de nombreux plug-ins JavaScript et icônes intégrés.
La partie la plus importante de Bootstrap est sa disposition réactive, qui peut être compatible avec l'accès aux pages sur PC, PAD et téléphones mobiles.
Téléchargement et démonstration de bootstrap:
Traduction de documents nationaux Site officiel: http://www.bootcss.com
Piaocheng Web Club Site officiel: http://www.ycku.com
2. Caractéristiques de bootstrap
Bootstrap est très populaire grâce à ses caractéristiques et fonctionnalités très pratiques. Les fonctions principales principales sont les suivantes:
(1). Disqueur, croisement
Il est compatible avec tous les navigateurs modernes, y compris les plus critiqués IE7 et 8. Bien sûr, ce cours ne considère plus les navigateurs ci-dessous IE9.
(2). Disposition réactive
Il peut non seulement prendre en charge les écrans à diverses résolutions du côté du PC, mais prend également en charge les écrans de commutation réactifs de la plate-forme mobile, du téléphone mobile et d'autres écrans.
(3). Composants complets fournis
Bootstrap fournit des composants très pratiques, notamment: la navigation, les étiquettes, les barres d'outils, les boutons et autres composants, qui sont pratiques pour les développeurs.
(4). Plug-in jQuery intégré
Bootstrap fournit de nombreux plug-ins jQuery pratiques, ce qui facilite les développeurs à mettre en œuvre divers effets spéciaux généraux sur le Web.
(5). Soutenir HTML5 et CSS3
Les étiquettes sémantiques HTML5 et les propriétés CSS3 sont bien prises en charge.
(6). Prise en charge du style moins dynamique
Moins utilise des variables, des nidification et des opérations pour écrire des CSS plus rapides et plus flexibles. Cela fonctionne bien avec Bootstrap.
3. Structure de bootstrap
Tout d'abord, si vous souhaitez comprendre la structure du document de Boostrap, vous devez le télécharger localement sur le site officiel. L'adresse de téléchargement de bootstrap est la suivante:
Adresse de téléchargement de bootstrap: http://v3.bootcss.com/ (Select Production Environment, v3.3.4)
Après décompression, le répertoire présente une structure comme celle-ci:
bootstrap /
├fiques CSS /
│├til "bootstrap.css
│├fiques-bootstrap.css.map
│├fiques bootstrap.min.css
│├fiques
│├fique
│└fique
├fiques
│├til "bootstrap.js
│└fiques bootstrap.min.js
└fiques les polices /
├fiques-halflings-réguliers des glyphicons-halflings-réguliers
├fiques-halflings-réguliers des glyphicons-halflings-réguliers
├fiques-halflings-réguliers des glyphicons-halflings-réguliers
├fiques-halflings-réguliers des glyphicons-halflings-réguliers
└fiques-Halphics-Halflings-Regular.woff2
Il est principalement divisé en trois répertoires principaux: CSS (style), JS (script) et polices (Font) .
1. Il y a quatre fichiers avec le suffixe CSS dans le répertoire CSS. Ceux contenant le mot min sont des versions compressées, qui sont généralement utilisées; Ceux qui ne contiennent pas sont des fichiers sans compression, et vous pouvez apprendre à comprendre le code CSS; Alors que le fichier avec le suffixe MAP est une table de mappage de code source CSS, qui est utilisée dans certains outils de navigateur spécifiques.
2.JS Le répertoire contient deux fichiers, qui sont des fichiers JS non compressés et compressés.
3.Fontes Le répertoire contient des fichiers de police avec différents suffixes.
4. Créez la première page
Nous créons une page HTML5, introduisons le fichier central de Bootstrap, puis testons s'il s'affiche normalement.
// le premier bootstrap
<! Doctype html> <html lang = "zh-cn"> <éad> <meta charset = "utf-8"> <tight> Bootstrap introduction </ title> <link rel = "Stylesheet" href = "css / bootstrap </ bouton> src = "js / jquery.min.js"> </ script> <script src = "js / bootstrap.min.js"> </ script> </ body> </html>
5. Diverses préparations pour apprendre
1. Outils de développement . Nous utilisons SUBLIME Text3 comme outil de développement pour bootstrap et installé le plug-in de génération de code Emmet;
2. Les outils de test , en plus des navigateurs modernes conventionnels, sont deuxièmement en tant qu'outils de test mobile. Nous utilisons l'Opera Mobile Emulator et les outils de test Web mobile de Chrome.
3. La base requise est au moins le fondement du premier cours de la saison HTML5. Bootstrap a de nombreux plug-ins jQuery intégrés. Bien qu'il soit beaucoup plus simple à utiliser que jQuery ou JS lui-même, si vous avez les bases de cours jQuery et JS, vous aurez une compréhension plus approfondie de votre apprentissage;
4. Résolution de cours : cours de base, nous utilisons 1024 x 768 pour enregistrer, mais certaines parties spéciales, telles que des cours réactives et de projet, nécessitent un enregistrement haute résolution, et utiliseront 1440 x 900 pour enregistrer.
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher un sujet merveilleux: 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 tous et j'espère que tout le monde soutiendra davantage Wulin.com.