码迷,mamicode.com
首页 > 其他好文 > 详细

bootstrap

时间:2016-08-24 12:41:49      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

1、网格结构:

栅格系统中的列是通过指定1到12的值来表示其跨越的范围 所以不会有col-**-15 最大也就是12
<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....
<div class="col-sm-10 col-md-8"> 
这个应该是说:
屏幕大于(≥992px) ,使用col-md-* 而不是col-sm-*
如果屏幕大于(≥768px),小于<=992px,使用col-sm-* 而不是col-md-*
对不同的屏幕大小实现了自己的布局。这样的改进才真正实现了响应式布局。
比如下面的代码
div class="row"
  div class="col-xs-12 col-sm-6 col-md-8" 手机小屏幕占据全部栏栅,ipad中屏幕占据6个栏栅,电脑桌面占8个栏栅/div
  div class="col-sm-6 col-md-4"手机小屏幕换行显示,ipad中屏幕占据6个栏栅,电脑桌面占4个栏栅/div
 
2、偏移列:在.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。

      为了在大屏幕显示器上使用偏移,请使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1到 11

<div class="col-xs-6 col-md-offset-3">  </div> 


bootstrap

标签:

原文地址:http://www.cnblogs.com/fan-lily/p/5802072.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!