Learn the web's mobile Web from scratch (vii) Bootstrap

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

• Github:github.com/daotin/web
• Public number: The top of the Web front
• Blog Park: http://www.cnblogs.com/lvonve/
• csdn:blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go into the Web front-end learning adventure!

A common response framework

As the Web application becomes more and more complex, in a lot of development process we find that there are many functional modules very similar, such as Carousel, paging, tabs, navigation bar, etc., often in the development of these universal function modules in a series of packages, so that they become a component application to the project, The development costs can be greatly reduced, and the common components are condensed together to form a front-end framework.

The common response frameworks are:

1, Bootstrap

Official website: http://www.bootcss.com/

A simple, intuitive, and powerful front-end development framework that makes web development faster and easier.

From Twitter, fans are among the most popular front-end frameworks available.

2. Amaze UI

Official website: http://amazeui.org/

China's first open source HTML5 cross-screen front-end framework.

Amaze ~ Sister UI, Chinese development, rising Star!

3, Framework7

Official website: http://www.framework7.cn/

Framework7 is a free, open-source, mobile HTML framework that is used primarily for the development of hybrid mobile apps or web apps, some of which are almost identical to native-born IOS and Android apps, as well as a fast development and presentation tool for application prototypes that are not accessible.

Framework7 's primary role is to give you the opportunity to develop IOS and Android apps with Html,css and JavaScript in a straightforward way. Framework7 is completely open, it does not limit you to open the brain hole creation, but also provides some solutions.

FRAMEWORK7 does not support all platforms. To give you the best experience, it only focuses on IOS and Google Material design styles.

Second, Bootstrap

Bootstrap is currently the most Popular front-end UI framework (with prefabricated interface components)

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive layouts, mobile device-first WEB projects.

Bootstrap is based on HTML5 and CSS3 development, it on the basis of jquery has been more personalized and humanized perfection, forming a set of their own unique website style, and compatible with most of the jquery plugin.

All JavaScript plugins for Bootstrap rely on JQuery.

1, bootstrap version of the understanding

• 2.x.x: Good compatibility/code is not concise, function is not perfect
• 3.x.x: Good stability, give up ie6-ie7, support for IE8 General/preference for responsive layout development, mobile device-first web project development
• 4.x.x: Test phase, in favor of responsive, mobile devices

2. Bootstrap Basic Template

<!--description page is HTML5 page--><! DOCTYPE html><!--page uses the locale-->

3. Bootstrap layout container

Bootstrap CSS style, there is a container supporting the entire page frame, also known as the layout container , it is similar to our alleys structure.

1 .container . A container that implements fixed widths and supports responsive layouts.

当屏幕宽度 > 1200，则页面宽度固定为 1170px当屏幕宽度 992~1200，则页面宽度固定为 970px当屏幕宽度 768~992，则页面宽度固定为 750px当屏幕宽度 < 768，则页面宽度固定为 100%.

2 .container-fluid : Realize the container width is full screen 100%.

4. Bootstrap grid system

Concept: Bootstrap provides a responsive, mobile-first streaming raster system, which is divided into 12 columns by default as the screen or viewport (viewport) size increases.

A raster system is used to create a page layout with a series of rows and columns (column), and your content can be placed in these created layouts.

The row must be included in the. container (fixed width) or. Container-fluid (100% width) to give it the appropriate arrangement (aligment) and inner complement (padding).

your content should be placed in column , and only columns (column) can be a direct child element of row. You can use a predefined class like. Row and. Col-xs-4 to quickly create a raster layout. The mixin defined in the Bootstrap source code can also be used to create a semantically formatted layout.

Create the interval between columns (gutter) by setting the Padding property for columns (column). Offsetting the padding that is set for the. container element by setting a negative margin for the. Row element also offsets the padding from the columns (column) contained in row.

A column in a raster system represents a range that is spanned by specifying a value of 1 to 12. For example, three equal-width columns can be created using three .col-xs-4 .

If a row contains columns greater than 12, the elements of the extra column (columns) are arranged as a whole on a different line.

Example:

<div class="row">    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div>    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"></div></div>

Explanation: The above four Div, if on the ultra-small screen on 100% display (12 raster), on the small screen, each div accounted for 50%, on the medium screen, each div accounted for 25%, on the large screen, each div accounted for 33.33% display.

Grid parameters:

.col-xs-: Ultra-small screen phone (<768px)

.col-sm-: Small screen tablet (≥768px)

.col-md-: Medium-screen desktop display (≥992px)

.col-lg-: Large screen large desktop monitor (≥1200px)

Attention:

1. The grid system is compatible: it means that the effect on the small screen is also visible on the big screen, but the settings on the big screen are not displayed properly on the small screen.

2.Row can be nested again in the column. If the entire column cannot be filled, the default is left-hand, and if it is exceeded, a newline is displayed.

5. Column sorting

• col-xs-offset-n: Offsets n rasters to the right, but affects all subsequent elements and also offsets n rasters. (internally implemented through Margin-left)
• col-xs-push/pull-n: Push to the right, pull to left. The right offset of n rasters may overlap the following elements. (Internal implementation principle is achieved by positioning)

6, column nesting

Column nesting is also a nested row in a column, note that you cannot embed registration Hearts container and container-fluid.

Because:

If the container is not included in the outer layer, then the width of the nested column is the current grid where the reference is located;

If container is added to the outer layer, then the reference is the container width set by the core style file

<div class="container">    <div class="row">        <div class="col-xs-1">1</div>        <div class="col-xs-1">2</div>        <div class="col-xs-6">            <!--            1.如果在外层没有再包含container,那么嵌套列的宽度就是参参照当前所在的栅格            2.如果外层添加了container,那么参照就是核心样式文件所设置的容器宽度-->            <!--<div class="container">-->                <div class="row">                    <div class="col-xs-6">3</div> <!--这里的6占的是直接父div的一半，而不是container的一半-->                    <div class="col-xs-6">4</div>                </div>            <!--</div>-->        </div>        <div class="col-xs-1">4</div>        <div class="col-xs-1">5</div>        <div class="col-xs-1">6</div>        <div class="col-xs-1">7</div>    </div></div>

7. Responsive Tools

(No upward compatibility, internal implementation is a specific range, does not ripple to other areas)

. HIDDEN-XS: Not visible under ultra-small screen

. HIDDEN-SM: Not visible under small screen

. HIDDEN-MD: Not visible on medium screen

. HIDDEN-LG: Not visible under the big screen

Example:

<div class="container">    <div class="row">        <div class="col-xs-1 hidden-sm">1</div> <!--在小屏幕下不可见-->        <div class="col-xs-1 hidden-xs">2</div> <!--在超小屏幕下不可见-->        <div class="col-xs-6 hidden-lg">        <!--在大屏幕下不可见-->        <div class="col-xs-1">4</div>        <div class="col-xs-1">5</div>        <div class="col-xs-1">6</div>        <div class="col-xs-1">7</div>    </div></div>