What is Bootstrap? Introduction to the usage of Bootstrap

Previous words

Bootstrap is a simple and flexible tool set for building HTML, CSS, and Javascript for WEB pages. Bootstrap is based on HTML5 and CSS3, with beautiful design, friendly learning curve, excellent compatibility, 12-column responsive grid structure, rich components and more. According to the publicity on the official website, Bootstrap is the most popular HTML, CSS and JS framework for developing responsive layout and mobile device-first WEB projects. This article will introduce an overview of Bootstrap

Introduction

In the traditional front-end development process, repeated, complex, and meaningless naming, redundant structures, and random nesting often occur. In 2011, in order to improve their internal analysis and management capabilities, Twitter's "small group" of engineers spent their spare time building an easy-to-use, elegant, flexible, and reliable system for their products. Expanded front-end toolset--BootStrap. Bootstrap was designed and built by MARK OTTO and Jacob Thornton. After being open sourced on github, it quickly became the most watched & fork project on the site. A large number of engineers actively contributed code to the project, the community is surprisingly active, the code version evolves very quickly, and the official documentation is of extremely high quality (it can be said to be elegant). At the same time, many websites based on Bootstrap have emerged: the interface is fresh and concise, and the elements are neatly typed. Dafang

The latest version of Bootstrap is Bootstrap4, the stable version is Bootstrap3, and the version compatible with lower versions of IE is Bootstrap2

Bootstrap is based on HTML5 and CSS3, and a large number of its JavaScript plug-ins rely on jQuery, and jQuery The version cannot be lower than version 1.9.1

Features

Bootstrap mainly has the following features:

Responsive design

Grid Layout

Complete class library

jQuery plug-in

Different usage scenarios

Included files

Bootstrap Two forms of compressed packages are provided. In the downloaded compressed package, you can see the following directories and files. These files are placed in different directories according to categories, and two versions, compressed and uncompressed, are provided.

【Precompiled version】

After downloading the compressed package, unzip it to any directory and you will see the following (compressed version) directory structure:

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

What is shown above is the basic file structure of Bootstrap: precompiled files can be used directly in any web project. Compiled CSS and JS (

bootstrap.*

) files are provided, as well as minified CSS and JS (bootstrap.min.*) files. It also provides CSS source code mapping table (bootstrap.*.map), which can be used in the development tools of some browsers. It also includes icon fonts from Glyphicons, which are used in the included Bootstrap theme [Bootstrap source code]

The Bootstrap source code includes pre-compiled CSS, JavaScript and icon font files , and there are also source codes for LESS, JavaScript and documentation. Specifically, the main file organization structure is as follows:

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

less/

, js/ and fonts/ directories Contains the source code of CSS, JS and font icons respectively. The dist/ directory contains all the files in the precompiled Bootstrap package mentioned above. docs/ contains the source code files of all documents, and the examples/ directory is the example project officially provided by Bootstrap. In addition to these, other files also include the definition file, license file and compilation script of the Bootstrap installation package.

Basic template

<!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>

The above is the detailed content of What is Bootstrap? Introduction to the usage of Bootstrap. For more information, please follow other related articles on the PHP Chinese website!