首页 > 其他 > 详细

[Bootstrap] 2. class 'row' & 'col-md-x' & 'col-md-offset-x'

时间:2015-02-16 18:15:08      阅读:472      评论:0      收藏:0      [点我收藏+]

Usually when desgin a web page, we think building the page in grid.

Bootstrap can help us to do that.

It divides the page into 12 cols. In the picture, there are three rows, on the top is header (it takes 12 cols), in the middle there is two cols, in the bottom, there are three cols.

 

技术分享技术分享

技术分享

技术分享

技术分享

 

You can finish this work quickly by using ‘col-md-x‘ class: it should sum up to 12 for each row.

技术分享

 

To organize the code structure better, you can but add ‘row‘ class:

技术分享

 

If one row exceeds 12 cols, the page layout would broken.

 

If you want to add more padding:

技术分享

 

You can use ‘col-md-offest-x‘ class:

技术分享

 

Result:

技术分享

[Bootstrap] 2. class 'row' & 'col-md-x' & 'col-md-offset-x'

原文:http://www.cnblogs.com/Answer1215/p/4294314.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!