Chapitre 1 : Première introduction aux compétences Bootstrap_javascript

Points d'apprentissage :

1.Aperçu du Bootstrap

2.Fonctionnalités Bootstrap

3.Structure Bootstrap

4. Créez la première page

5. Diverses préparations à l'apprentissage

Dans cette leçon, nous comprenons principalement l'histoire, les caractéristiques, les utilisations de Boostrap, et pourquoi nous choisissons Boostrap pour développer nos projets web.

1. Présentation de Bootstrap

Bootstrap est un framework open source basé sur HTML, CSS et JavaScript développé par deux ingénieurs techniques de Twitter (le plus grand Weibo au monde). Le code du framework est concis et visuellement beau, et peut être utilisé pour créer rapidement et facilement des exigences de page Web basées sur des PC et des appareils mobiles.

En juin 2010, les ingénieurs de Twitter ont travaillé pour résoudre le problème de la collaboration et de l'unification dans les tâches de développement front-end. Après avoir examiné diverses options, Bootstrap a finalement été finalisé et publié en août 2011. Après une longue période de mises à niveau itératives, il est passé d'un projet initial basé sur CSS à un framework open source frontal Web multifonctionnel avec de nombreux plug-ins et icônes JavaScript intégrés.

La partie la plus importante de Bootstrap est sa mise en page 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émo de Bootstrap :

Site officiel de la traduction de documents nationaux : http://www.bootcss.com

Site officiel du Laicheng Web Club : http://www.ycku.com

2. Fonctionnalités d'amorçage

Bootstrap est très populaire en raison de ses fonctions et fonctionnalités très utiles. Les principales fonctionnalités fonctionnelles de base sont les suivantes :

(1). Multi-appareils, multi-navigateurs

Compatible avec tous les navigateurs modernes, y compris les plus critiqués IE7 et 8. Bien entendu, ce cours ne prend plus en compte les navigateurs inférieurs à IE9.

(2). Mise en page réactive

Non seulement il peut prendre en charge les affichages de différentes résolutions côté PC, mais il prend également en charge l'affichage de commutation réactif sur le PAD mobile, le 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 une série de composants, que les développeurs peuvent facilement appeler.

(4). Plug-in jQuery intégré

Bootstrap fournit de nombreux plug-ins jquery pratiques, qui permettent aux développeurs d'implémenter divers effets spéciaux courants sur le Web.

(5). Prise en charge HTML5, CSS3

Les balises sémantiques HTML5 et les attributs CSS3 sont bien pris en charge.

(6). Prise en charge MOINS de style dynamique

LESS utilise un codage mixte avec des variables, des imbrications et des opérations pour écrire du CSS plus rapide et plus flexible. Il peut être bien développé avec Bootstrap.

3. Structure d'amorçage

Tout d'abord, si vous souhaitez comprendre la structure du document Boostrap, vous devez le télécharger localement depuis le site officiel. L’adresse de téléchargement Bootstrap est la suivante :

Adresse de téléchargement Bootstrap : http://v3.bootcss.com/ (sélectionnez l'environnement de production, v3.3.4)

Après décompression, le répertoire aura la structure suivante :

bootstrap/
├──css/
│├── bootstrap.css
│├── bootstrap.css.map
│├── bootstrap.min.css
│├── bootstrap-theme.css
│├── bootstrap-theme.css.map
│└── bootstrap-theme.min.css
├──js/
│├── bootstrap.js
│└── bootstrap.min.js
└── polices/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

est principalement divisé en trois répertoires principaux : css (style), js (script) et fonts (polices).

1.css Il y a quatre fichiers avec le suffixe css dans le répertoire. Ceux contenant le mot min sont des versions compressées. Ceci est généralement utilisé ; les fichiers qui n'incluent pas les fichiers sont non compressés et vous pouvez en apprendre davantage sur le css. code ; et les fichiers avec le suffixe map sont Le fichier est une table de mappage de code source CSS, utilisée dans certains outils de navigateur spécifiques.

Le répertoire 2.js contient deux fichiers, qui sont des fichiers js non compressés et compressés.

Le répertoire 3.fonts contient des fichiers de polices avec différents suffixes.

4. Créez votre première page

Nous créons une page HTML5, importons les fichiers principaux de Bootstrap, puis testons si elle s'affiche normalement.

//第一个 Bootstrap
<!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Bootstrap 介绍</title>
　　<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
　　<button class="btn btn-info">Bootstrap</button>
　　<script src="js/jquery.min.js"></script>
　　<script src="js/bootstrap.min.js"></script>
</body>
</html> 

5. Diverses préparations pour étudier

1. Outils de développement, nous utilisons Sublime Text3 comme outil de développement pour Bootstrap et avons installé le plug-in de génération de code Emmet

2. Outils de test, en plus des navigateurs modernes conventionnels, le second est un outil de test mobile. Nous utilisons Opera Mobile Emulator et l'outil de test Web mobile de Chrome.

3. La base requise est au moins la base du cours HTML5 Saison 1. Bootstrap possède 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, puis l'apprentissage et la compréhension seront plus profonds

4. Résolution du cours : pour les cours de base, nous utilisons 1024 x 768 pour enregistrer, mais certaines parties spéciales, telles que les cours réactifs et de projet, nécessitent un enregistrement haute résolution et seront enregistrées à 1440 x 900.

Ce qui précède est la connaissance pertinente du framework Bootstrap présentée par l'éditeur. J'espère que cela vous sera utile !