Home >Web Front-end >HTML Tutorial >What is Bootstrap and what are its characteristics?
What is Bootstrap and what are its characteristics?
- 青灯夜游Original
- 2018-09-19 16:14:2311693browse
This chapter will introduce to you what Bootstrap is and what are its characteristics? Let everyone have a preliminary understanding of the Bootstrap framework. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
one. Bootstrap Overview
Bootstrap is an open source framework based on
HTML, CSS, and JavaScript developed by two technical engineers from Twitter (the world's largest Weibo). The framework code is concise and visually beautiful, and can be used to quickly and easily build web page requirements based on PC and mobile devices.
In June 2010, engineers within Twitter worked to solve the problem of collaborative unification in front-end development tasks. After going through various options, Bootstrap was finally finalized and released in August 2011. After a long period of iterative upgrading, it has developed from an initial CSS-driven project into a multifunctional web front-end open source framework with many built-in JavaScript plug-ins and icons.
The most important part of Bootstrap is its responsive layout, which can be compatible with page access on PC, PAD
and mobile phones.
Bootstrap download and demonstration:
Domestic document translation official website:
http://www.bootcss.com
## 2. Bootstrap Features
Bootstrap is very popular due to its very useful functions and features. The main core functions and features are as follows:
Can be compatible with all modern browsers, including the more criticized IE7 and 8. Of course, this course no longer considers browsers below IE9. (2). Responsive layout can not only support the display of various resolutions on the PC side, but also support the responsive switching display of mobile PAD, mobile phone and other screens.
(3). Comprehensive components provided
Bootstrap provides highly practical components, including: navigation, labels, toolbars, buttons and a series of components, which are convenient for developers to call.
(4). Built-in jQuery plug-in
Bootstrap provides many practical jquery plug-ins, which facilitate developers to implement various
regular special effects on the Web.
(5). Support HTML5, CSS3
HTML5 semantic tags and CSS3 attributes are well supported.
(6).Support LESS dynamic style
LESS uses variables, nesting, and operation mixed coding to write faster and more flexible CSS. It can be developed well with Bootstrap.
three. Bootstrap structure
First of all, if you want to understand the document structure of Boostrap, you need to download it locally from the official website. Bootstrap
The download address is as follows:
Bootstrap download address:
(Select the production environment, v3.3.4)After decompression, the directory appears Such a structure: 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
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons- halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2
is mainly divided into Three core directories: css (style), js (script), and fonts (fonts).
1.css There are four files with the css suffix in the directory. The files containing the word min are compressed versions. Generally,
is used; the files that are not included are uncompressed and you can learn to understand the css code files; and Files with the map suffix are
css source code mapping tables, used in some specific browser tools.
2.js directory contains two files, which are uncompressed and compressed js files.
3.fonts directory contains font files with different suffixes.
Create the first bootstrap page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrap初体验</title>
<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
<button class="btn btn-default">bootstrap初体验之按钮</button>
</body>
</html>Bootstrap Set the global font-size to 14px and line-height to 1.428 (i.e. 20px);c852e9f44254fc96ef7cc6d3d1da32e1paragraph element is set equal to 1/2 line height (i.e. 10px); the color is set to #333.
The above is the detailed content of What is Bootstrap and what are its characteristics?. For more information, please follow other related articles on the PHP Chinese website!