Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "what is the structure of Bootstrap". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I. introduction to Bootstrap

Bootstrap is by far the most popular front-end framework for programmers. It is an open source framework based on HTML, CSS and JavaScript developed by two technical engineers of Twitter. The framework has concise code and beautiful vision, 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 collaboration and unification in front-end development tasks. After various scenarios, Bootstrap was finally finalized and released in August 2011. After a long period of iterative upgrade, it has evolved from the original CSS-driven project to a multi-functional Web front-end framework with many JavaScript plug-ins and icons.

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

II. Bootstrap characteristics

Bootstrap is very popular because of its very practical features and features. The main core functions are as follows:

(1)。 Cross-device, cross-browser

Can be compatible with all modern browsers, including the more criticized IE7, 8. Of course, browsers below IE9 are no longer considered in this course.

(2)。 Responsive layout

It can not only support the display of various resolutions on the PC side, but also support the responsive switching display of mobile PAD, mobile phones and other screens.

(3)。 Provides a comprehensive set of components

Bootstrap provides practical components, including navigation, labels, toolbars, buttons and other components, which are convenient for developers to call.

(4)。 Built-in jQuery plug-in

Bootstrap provides many practical jquery plug-ins that make it easy for developers to implement a variety of general special effects in Web.

(5)。 Support for HTML5 and CSS3

HTML5 semantic tags and CSS3 attributes are well supported.

(6)。 Support for LESS dynamic styles

LESS uses mixed coding of variables, nesting, and operations to write faster and more flexible CSS. It works well with Bootstrap.

3. Bootstrap structure

First of all, to understand the document structure of Boostrap, you need to download it locally on the official website. The download address for Bootstrap is as follows:

Bootstrap download address: the latest version of Bootstrap (you can choose a production environment, v3.3.4)

When unzipped, the directory looks like this:

Bootstrap/

├── css/

│├── bootstrap.css

│├── bootstrap.css.map

│├── bootstrap.min.css

│├── bootstrap-theme.css

├── js/

│├── bootstrap.js

│└── bootstrap.min.js

└── fonts/

├── glyphicons-halflings-regular.eot

├── glyphicons-halflings-regular.svg

├── glyphicons-halflings-regular.ttf

├── glyphicons-halflings-regular.woff

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

There are four css suffix files in the css directory, which contain the word min, is a compressed version, generally use this; do not contain files that are not compressed, you can learn to understand css code; and the file with the map suffix is a css source code mapping table, used in some specific browser tools.

The js directory contains two files, which are uncompressed and compressed js files.

The fonts directory contains font files with different suffixes.

Four. create the first page

We create a page of HTML5, introduce the core file of Bootstrap, and then test whether it is displayed properly.

Bootstrap introduction

Bootstrap

Five. all preparations for study

Development tools, we use Sublime Text3 as the development tool of Bootstrap, and install the Emmet code generation plug-in

Testing tools, in addition to the conventional modern browser, the second is as a mobile testing tool, we use Opera Mobile Emulator, and Chrome's mobile Web testing tools here.

The required foundation, at least the foundation of the first quarter of HTML5 courses, Bootstrap has a lot of built-in jQuery plug-ins, although it is much easier to use than jQuery or JS itself, but if you have the foundation of jQuery courses and JS courses, you will have more in-depth understanding.

Course resolution: basic courses, we use 1024 x 768 to record, but some special parts, such as responsive and project courses, require large resolution recording, which will be recorded in 1440 x 900.

This is the end of the content of "what is the structure of Bootstrap"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.