[Bootstrap] 7-day in-depth Bootstrap (2) overall architecture, bootstrap Architecture

[Bootstrap] 7-day in-depth Bootstrap (2) overall architecture, bootstrap Architecture

Most Bootstrap users think that Bootstrap only provides CSS components and JavaScript plug-ins. In fact, CSS components and JavaScript plug-ins are only the manifestations of the Bootstrap framework. They are built on the basic platform.

 

This section contains the following contents:

• Overall Architecture
• Raster System
• CSS component architecture
• JS plug-in architecture
• Disable responsive Layout

 

Overall Architecture

12. Grid System

This is the core function of bs and an implementation form of the core concept of responsive design.

Basic layout component

Bs provides a variety of basic layout components, such as typographical, code, tables, buttons, and forms.

JQuery

All bs JavaScript plug-ins depend on jQuery1.10 +. To use these plug-ins, you must reference the jQuery library.

Responsive Design

Responsive design is a concept, not a function. All bs content is implemented based on responsive design.

CSS Components

Many bs components make it easy to use. There are 5 arrows in the CSS and JavaScript plug-ins, indicating that these 5 related components (INS) are directly related.

JavaScript plugin

Through js plug-ins, You can implement more complex page logic.

 

Raster System

Implementation Principle

The implementation principle of the raster system is very simple. It only defines the container size, shares 12 parts equally, adjusts the internal and external margins, and finally integrates the media query, A powerful responsive raster system is created.

 

Usage

 

Responsive raster

In the bs raster system, the browser is divided into four types based on the width. The values are automatic (100%), 750px, 970px, and 1170px.

Corresponding styles include ultra-small (xs), small (sm), medium (md), and large (lg)

Essentially, it is achieved by defining the minimum width of a media query. Therefore, it is backward compatible and backward incompatible!

 

Column offset

The column offset function of the raster system does not need to define the margin value. You can use a style in the form of. col-md-offset-* to offset the column to the right.

In essence, this effect is achieved through margin-left.

 

Column sorting

Column sorting (push and pull) is actually changing the column direction, that is, changing the Left and Right floating, and setting the floating distance.

By push and pull, the position is changed by left and right essentially.

 

CSS component architecture

AO mode: A indicates Append, that is, the meaning of "appending"; O indicates Overwrite, that is, the meaning of "Rewriting.

Basic Style

Any CSS component must first define the basic style at the beginning. Use basic styles to define a uniform font size and background color.

 

Color Style

The five basic colors are: primary (Key blue), success (success green), info (Information blue), warning (warning orange), and danger (Dangerous red ).

The definition color is related to the features of the component. The panel only needs to define the border color, while the button not only needs to define the border color, but also the background color and text color.

 

Dimension Style

There are four basic dimensions: Ultra small (xs), small (sm), common, large (lg ).

 

Status Style

Use active style when highlighted and available, and disabled style when disabled

This type of style is generally used to process the shadow, Mouse shape, transparency, and dotted box of elements.

 

Special element style parallel Element Nested child element

Special elements, that is, components of a specific type generally only use one or more fixed elements.

For example, in the alert warning box, only warning titles, content, and closed link elements are used, such as the frequently used li elements in the Navigation (nav.

 

Animation style

In bs, there are not many animation styles that are used only in progress bar components. (The trans plug-in of bs is not included here)

You only need to apply an active style to the progress style to enable the animation transition effect.

 

JS plug-in architecture

HTML layout rules

By default, all plug-ins can be implemented by setting specific HTML code and corresponding attributes (or custom attributes.

For example, data-dismiss = "alert", data-toggle = "dropdown", data-toggle = "tab"

The essential implementation methods are roughly as follows:

// Alert plug-in class and prototype method definition // definition selector, all elements that match this custom attribute can trigger the following event var dismiss = '[data-dismiss = "alert"]'; var Alert = function (el) {// input element. If the element has a custom attribute set on dismiss, the click event triggers the close method $ (el) on the prototype ). on ('click', dismiss, this. close);} Alert. prototype. close = function (e) {// todo close}

 

Implementation

 

Custom events

All events are named in a space, that is, a single event must be placed in a namespace, such as show. bs. modal.

All plug-ins provide the preventDefault function to prevent subsequent code execution. For example,

$ ('# Mymodal'). on ('Show. bs. modal', function (e) {if (! Data) return e. preventDefault () // reject pop-up window display })

 

 

Disable responsive Layout

Bootstrap is a mobile first frame. By default, the page is automatically adjusted for different screen sizes, so that it performs well on screens of different sizes.

 

Disable procedure

 

This Section Address: http://neverc.cnblogs.com/p/4779890.html