What is Bootstrap used for?

One. About Bootstrap

Bootstrap is by far the most popular front-end framework for programmers. I t is an open source framework based on HTML, CSS, and JavaScript developed by two technical engineers at Twitter. The framework code is concise and visual, and can be used to quickly and easily build web page requirements based on PC and mobile devices.

In June 2010, engineers inside Twitter worked to address collaboration unity issues in front-end development tasks. A fter a variety of scenarios, Bootstrap was finally finalized and released in August 2011. After a long iterative upgrade, the original CSS-driven project evolved into an open source framework with a multifunction web front end with many JavaScript plug-ins and icons built into it.

The most important part of Bootstrap is its responsive layout, which is compatible with page access on the PC side, PAD, and mobile end of the phone.

Two. Bootstrap features

Bootstrap is very popular thanks to its very useful features and features. The main core features are as follows:

(1). Cross-device, cross-browser

Compatible with all modern browsers, including IE7 and 8. Of course, the following browsers in IE9 are no longer considered in this course.

(2) Responsive layout

Not only can you 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) Provides a comprehensive component

Bootstrap provides highly practical components, including navigation, tags, tool bars, buttons, and more for developers to call.

(4). Built-in jQuery plug-in

Bootstrap offers a number of practical jquery plug-ins that make it easy for developers to implement a variety of general effects on the web.

(5). Support for HTML5, CSS3

HTML5 semantic tags and CSS3 properties are well supported.

(6). LESS dynamic style is supported

LESS uses variable, nesting, and manipulation hybrid coding to write faster, more flexible CSS. It works well with Bootstrap.

Three. Bootstrap structure

First, to understand Boostrap's document structure, you need to download it locally on your official website first. Bootstrap download address is as follows:

Bootstrap Download Address: Bootstrap Latest Version (Select Production Environment, v3.3.4)

After decompression, the directory presents a structure that:

It is divided into three core directories: css (style), js (script), fonts (font).

1. There are four css suffix files in the css directory, which contain the word min, which is a compressed version, which is generally used;
2. The js directory contains two files, which are uncompressed and compressed js files.
3. The fonts directory contains font files with different suffixes.

Four. Create the first page

Let's create an HTML5 page and introduce bootstrap's core files, and then test whether it's displayed properly.

Five. Preparations for learning

1. Development tools, we use Sublime Text3 as a development tool for Bootstrap, and install emmet code generation plug-ins;
2. The test tool, in addition to the regular modern browser, is followed by the mobile test tool, which we use here with Opera Mobile Emulator, and Chrome's Mobile Web Test tool.
3. The required foundation, at least the basis of the first season of HTML5 courses, Bootstrap built in a lot of jQuery plug-ins, although much simpler to use than jQuery or JS itself, but if there is a jQuery course and JS course foundation, then the learning comprehension is more in-depth;
4. Course Resolution: Basic course, we use 1024 x 768 to record, but some special sections, such as responsive and project courses, require large resolution recording and 1440 x 900.

Six. More learning resources

• Bootstrap3 micro-class
• Little White School Front End: An easy-to-understand Bootstrap tutorial
• Bootstrap reference manual