[Bootstrap]7 Day in-depth Bootstrap (2) Overall architecture

Most bootstrap users agree that bootstrap only provides CSS components and JavaScript plugins, and that CSS components and JavaScript plugins are only representations of the bootstrap framework, which are built on top of the underlying platform.

This program is recorded:

• Overall architecture
• Grid system
• CSS Component Architecture
• JS Plugin Architecture
• disabling responsive layouts

Overall architecture

12 Grid system

This is the core function of the whole BS, and it is also an implementation form of the core concept of responsive design.

Basic Layout Components

BS provides a variety of basic layout components, such as typography, code, tables, buttons, forms, etc.

Jquery

BS all JavaScript plugins rely on jquery1.10+, and if you want to use these plugins, you must refer to the jquery library.

Responsive design

Responsive design is an idea, not a function, and all of BS's content is implemented in the design concept of responsive design.

CSS Components

BS a multitude of components that make it easy to use, there are 5 arrows in the middle of the CSS and JavaScript plug-ins, indicating that the 5 related components (plugins) have a direct relationship to each other.

JavaScript plugins

With the JS plugin, more complex page logic can be implemented.

Grid system

Implementation principle

The implementation of the grid system is very simple, simply by defining the size of the container, split 12 parts, then adjust the internal and external margins, and finally combined with media queries, the system made a powerful response to the grid system.

Usage

1. A row of data (row) must be contained in the container (usually in. Container)
2. Create a set of columns (column) horizontally using rows (row)
3. Specific content should be placed in column

Responsive Rasters

In the BS grid system, the browser is divided into 4 types depending on the width. The values are: Auto (100%), 750px, 970px, 1170px, respectively.

The corresponding styles are ultra-small (XS), Small (SM), Medium screen (MD), large (LG)

The essence is defined by the media query to define the minimum width implementation. So, to the big compatible, to small incompatible!

Column offset

The column offset (offset) feature of the raster system eliminates the need to define margin values. You can offset columns to the right by using the style of the. col-md-offset-* form.

This effect is achieved through the margin-left of nature.

Column sort

Column ordering (push and pull) is actually changing the direction of the column, that is, changing the left and right floats, and setting the floating distance.

By push and pull, the essence changes position by left and right.

CSS Component Architecture

AO mode: A denotes append, meaning "append"; o denotes overwrite, meaning "rewrite".

Base style

Any CSS component must first define a basic style at the beginning. Defines a uniform font size and background color through the base style.

Color style

5 Basic colors are: primary (key blue), success (Success green), info (information blue), warning (warning orange), danger (dangerous red).

Defining colors is about the component's characteristics, and panel panels only need to define the color of the border, and the buttons need to define not only the border color, but also the background color and the text color.

Dimension style

There are 4 basic sizes: Ultra-Small (XS), Small (SM), Normal, large (LG).

State style

Use active style when highlighting is available, disable with disabled style

This type of style typically deals with elements such as shadows, mouse shapes, transparency, gridlines, and so on.

Special element style side element nested elements

The so-called special elements, that is, certain types of components generally use only one or several fixed elements.

For example, the alert warning box typically uses only warning headers, content, and close link elements, as well as the frequently used Li elements in navigation (NAV).

Animation style

In BS, animation styles are not used much, only in the progress bar assembly. (The trans plugin of BS is not included here)

You can turn animation transitions on only by applying an active style to the progress style.

JS Plugin Architecture

HTML Layout Rules

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

such as: data-dismiss= "alert", data-toggle= "dropdown", data-toggle= "tab"

The nature of the implementation is generally as follows

        The definition of alert plug-in class and prototype method         //Definition selector, all elements conforming to this custom attribute can trigger the following event        var dismiss = ' [data-dismiss= ' alert '] ';        var Alert = function (EL) {            //passed in 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        }

Realize

1. Declaring a function called immediately
2. Defining plug-in classes and related prototyping methods
3. Defining plug-ins and resetting plug-in constructors on jquery
4. Anti-conflict handling
5. Binding various triggering events

Custom events

All events are namespace--that is, a single event is placed under a namespace, for example, Show.bs.modal.

All plug-ins provide preventdefault functionality to prevent the continuation of subsequent code, for example,

$ (' #myModal '). On (' Show.bs.modal ', function (e) {    if (!data) return E.preventdefault ()        //Reject show Popup})

disabling responsive layouts

Bootstrap is a mobile-first frame that, by default, adjusts the page automatically for different screen sizes so that it behaves well on screens of different sizes.

Disable step

1. Remove the meta element named Viewpot, for example: <meta name= "Viewport" ....../>
2. Set a fixed width value for. Container to override the frame's default width setting, such as Width:970px!important
3. If you use the navigation bar component, you also need to remove all collapsed and expanded behavior
4. For raster layouts, add additional. col-xs-* styles, or replace. col-md-* and. col-lg-* Styles

This section address: http://neverc.cnblogs.com/p/4779890.html

[Bootstrap]7 Day in-depth Bootstrap (2) Overall architecture