步骤：
1.定义容器，相当于以前的table
容器分类使用：container：不论在哪种设备上，距离屏幕左右两侧都会流出一定的空白间距，没有占满，看起来不是很紧凑，舒适
container-fluid：宽度占满了整个屏幕，每一种设备都是100%的宽度
2.定义行，相当于tr
样式使用：row
3.定义元素，相当于td，指定该元素所占的格式数目，样式：col-设备代号-格子数目
设备代号有四种
1. xs：手机，col-xs-12，意味着此元素在手机上占了12个格子，占满了整行
2.sm：平板电脑
3. md：笔记本电脑
4.lg: 台式机大桌面显示器
注意：
1.一行中如果格子数目超过12，则超出部分自动换行
2.栅格类属性可以向上兼容，比如：用的是col-xs-3，手机屏幕的属性，那么随着屏幕的变宽，比如是电脑打开的，会在一行等比例缩放，但是用的是sm和md的话，是不向下兼容，屏幕缩小的话，会换行
代码例子：
<body>
<!--1定义容器-->
<div class="container">
<!--2定义行-->
<div class="row">
<!--3定义元素-->
<div class="col-lg-1 col-sm-2>栅格</div>
<div class="col-lg-1 col-sm-2>栅格</div>
<div class="col-lg-1 col-sm-2>栅格</div>
<div class="col-lg-1 col-sm-2>栅格</div>
<div class="col-lg-1 col-sm-2>栅格</div>
<div class="col-lg-1 col-sm-2>栅格</div>
<div class="col-lg-1 col-sm-2>栅格</div>
<div class="col-lg-1 col-sm-2>栅格</div>
<div class="col-lg-1 col-sm-2>栅格</div>
<div class="col-lg-1 col-sm-2>栅格</div>
<div class="col-lg-1 col-sm-2>栅格</div>
<div class="col-lg-1 col-sm-2>栅格</div>
</div>
</div>
</body>
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
