search

Home  >  Article  >  Web Front-end  >  What is Bootstrap? A brief introduction to Bootstrap

What is Bootstrap? A brief introduction to Bootstrap

PHPz
PHPzOriginal
2018-09-20 16:50:593601browse

This article brings you what is Bootstrap? A brief introduction to Bootstrap has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

【Related video recommendation: Bootstrap tutorial】

1. 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:

(1). Cross-device and cross-browser 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: http://v3.bootcss.com/ (Select the production environment, v3.3.4)

After decompression, the directory will have the following 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
It is mainly divided into three core directories: css (style), js (script), fonts (font).
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

<!--描述：Bootstrap之初体验-->
<!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 sets the global font-size to 14px and line-height to 1.428 (i.e. 20px);

paragraph The element is set equal to 1/2 the line height (i.e. 10px); the color is set to #333.

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

JavaScript html5 jquery css bootstrap css3 less html map JS http
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to process dynamic data in vue loop list (code)Next article：How to process dynamic data in vue loop list (code)

Related articles

See more