Bootstrap css就是别人做好的一些类,你只要把相关的类引用到你的HTML元素中即可达到想要的效果(别人做好的效果)
Bootstrap 网格系统
就是将网页进行分块处理,如一行分多少个格(分3列),每个元素占用多少个格(如占用2列)这样的概念。
1.Bootstrap 3 是移动设备优先的
2.Bootstrap将网页分成12列,
3.超小设备(手机,小于 768px)(Class 前缀:col-xs-)
4.小型设备(平板电脑,768px 起)(Class 前缀:col-sm-)
5.中型设备(台式电脑,992px 起)(Class 前缀:col-md-)
6.大型设备(大台式电脑,1200px 起)(Class 前缀:col-lg-)
响应式的列重置(就是按检测到的屏幕大小选择占用不同的列数)
<div class="col-xs-6 col-sm-3"> //如果是超小设备占用6列,如果是小型设备占用3列
偏移列
1.col-xs=* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。
2.col-xs/sm/md/lg-offset-
<div class="col-xs-6 col-md-offset-3">
嵌套列
1.为了在内容中嵌套默认的网格,请添加一个新的 .row
2.里面的列也是按12份进行分列
<div class="row"> <div class="col-md-3"> <h4>第一列</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> <div class="col-md-9" "> <div class="row"> <div class="col-md-6"> <p> Consectetur art party Tonx culpa semiotics. Pinterest </p> </div> <div class="col-md-6"> <p> sed do eiusmod tempor incididunt ut labore et dolore magna </p> </div> </div> </div> </div>
列排序
1.col-xs/sm/md/lg-push-(往右推,以最左边为参考点)
2.col-xs/sm/md/lg-pull-(往左拉,以最左边为参考点)
3. 范围是从 1 到 11
<div class="col-md-push-8"> 我在左边 </div> <div class="col-md-pull-4"> 我在右边 </div>
参考原文: http://www.runoob.com/try/try2.php?filename=bootstrap3-gridsys-nestingcolumns