Qu'est-ce que Bootstrap ? Introduction à l'utilisation de Bootstrap

Les mots précédents

Bootstrap est un ensemble d'outils simple et flexible de HTML, CSS et Javascript utilisé pour créer des pages WEB. Bootstrap est basé sur HTML5 et CSS3, avec un beau design, une courbe d'apprentissage conviviale, une excellente compatibilité, une structure de grille réactive à 12 colonnes, des composants riches et bien plus encore. Selon la publicité sur le site officiel, Bootstrap est le framework HTML, CSS et JS le plus populaire pour développer des mises en page réactives et des projets WEB axés sur les appareils mobiles. Cet article présentera un aperçu de Bootstrap

introduction

Dans le processus de développement frontal traditionnel, des noms répétés, complexes et dénués de sens, des structures redondantes et une imbrication aléatoire souvent Des problèmes tels que la confusion des pages

En 2011, afin d'améliorer leurs capacités internes d'analyse et de gestion, le « petit groupe » d'ingénieurs de Twitter a utilisé son temps libre pour créer un site facile à utiliser, élégant et flexible. et un ensemble d'outils fiables pour leurs produits. Ensemble d'outils frontaux étendu - BootStrap. Bootstrap a été conçu et construit par MARK OTTO et Jacob Thornton. Après avoir été open source sur github, il est rapidement devenu le projet le plus regardé et le plus fork du site. Un grand nombre d'ingénieurs ont activement contribué au code du projet, la communauté est étonnamment active, la version du code évolue très rapidement et la documentation officielle est d'une qualité extrêmement élevée (on peut dire qu'elle est élégante en même temps, nombreuse). des sites Web basés sur Bootstrap ont vu le jour : l'interface est fraîche et concise, et les éléments sont soigneusement typés

La dernière version de Bootstrap est Bootstrap4, la version stable est Bootstrap3 et la version compatible avec les versions inférieures de. IE est Bootstrap2

Bootstrap est basé sur HTML5 et CSS3, et un grand nombre de ses plug-ins JavaScript reposent sur jQuery, et jQuery La version ne peut pas être inférieure à la version 1.9.1

Fonctionnalités

Bootstrap possède principalement les fonctionnalités suivantes :

Conception réactive

Disposition en grille

Bibliothèque de classes complète

Plug-in jQuery

Différents scénarios d'utilisation

Fichiers inclus

Bootstrap Deux formes de packages compressés sont fournies Dans le package compressé téléchargé, vous pouvez. voir les répertoires et fichiers suivants. Ces fichiers sont placés dans des répertoires différents selon les catégories, et deux versions, compressées et non compressées, sont fournies.

【Version précompilée】

Après avoir téléchargé le package compressé, décompressez-le dans n'importe quel répertoire et vous verrez la structure de répertoires suivante (version compressée) :

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

Ce qui est montré ci-dessus est la structure de base des fichiers de Bootstrap : les fichiers précompilés peuvent être utilisés directement dans n'importe quel projet Web. Des fichiers CSS et JS (bootstrap.*) compilés sont fournis, ainsi que des fichiers CSS et JS minifiés (bootstrap.min.*). Il fournit également une table de mappage du code source CSS (bootstrap.*.map), qui peut être utilisée dans les outils de développement de certains navigateurs. Il comprend également des polices d'icônes de Glyphicons, qui sont utilisées dans le thème Bootstrap inclus

【Code source Bootstrap】

Le code source Bootstrap comprend des fichiers CSS, JavaScript et de polices d'icônes précompilés, et là sont également des codes sources pour LESS, JavaScript et la documentation. Plus précisément, la structure principale d'organisation des fichiers est la suivante : Les répertoires

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

　　less/, js/ et fonts/ contiennent le code source du CSS, du JS et des icônes de police. respectivement. Le répertoire dist/ contient tous les fichiers du package Bootstrap précompilé mentionné ci-dessus. docs/ contient les fichiers de code source de tous les documents. Le répertoire examples/ est un exemple de projet officiellement fourni par Bootstrap. En plus de ceux-ci, d'autres fichiers incluent également le fichier de définition, le fichier de licence et le script de compilation du package d'installation Bootstrap.

Modèle de base

<!DOCTYPE html><html lang="zh-CN">
  <head><!-- utf-8编码--><meta charset="utf-8"><!-- 在IE运行最新的渲染模式--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--视口viewport设置--><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>Bootstrap 101 Template</title><!-- 引入Bootstrap --><link href="css/bootstrap.min.css?1.1.11" rel="stylesheet"><!-- 在IE8-浏览器中，支持HTML5新标签和媒体查询@media--><!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js?1.1.11"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js?1.1.11"></script>
    <![endif]-->
  </head>
  <body><h1>你好，世界！</h1><!-- 先引入jQurey，再引入bootstrap插件 --><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js?1.1.11"></script><script src="js/bootstrap.min.js?1.1.11"></script>
  </body></html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!