Bootstrap introduction and the grid system col-md/sm/xs-x in bootstrap;

Source: Internet
Author: User
Tags css preprocessor

Bootrap is the Web front-end CSS framework. It was developed based on CSS3 and HTML5, and it was perfected on the basis of jquery. Form your own style and compatible with most of the jquery plugins. Bootstrap existing version fourth. Change from less to sass, does not support IE, merged so HTML resets to a new module, rewritten so the JS plugin. Bootstrap contains a rich set of Web Components and comes with 13 jquery plugins. Module code, you can modify the bootstrap in the CSS variables, according to their own needs to cut the code. Bootstrap less is a CSS preprocessor that makes CSS dynamic, and can also use less variables in CSS, mixins (mixed), nesting (nested). The form is as follows:
<div class= "wrap" > <div class= "Row" > <div class= "col-md-3" >3</div> <div C lass= "col-md-6" >6</div> <div class= "col-md-3" >3</div> </div> raster row up to 12 columns, if <12, the remaining Partially blank. If >12, the extra part is on the next line. <div class= "Row" > <div class= "col-md-3" >3</div> <div class= "col-sm-6" >6</div > <div class= "col-xs-6" >6</div> </div></div> wherein, md/sm/xs means that when the page defines a threshold value, when the > Critical value, a Rows of squares are arranged horizontally. When the < threshold is reached, a row of squares is arranged vertically. The criticality of XS is 768 (< cell phone), the criticality of SM is 992 (< flat), MD is the critical (< desktop), so XS is always arranged horizontally. 900px
1080px. Col-md-offset-x; is the offset column to the right of x distance. Col-md--push-x is the qianlieping shift.

Introduction to Bootstrap and grid system col-md/sm/xs-x in bootstrap;

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.