布局容器
为页面的栅格布局提供一个包裹的容器，有两个容器类。
container 类
会随着
屏幕大小改变成相应的宽度，响应式推荐使用
- 响应式布局容器 固定宽度
- 大屏（ >= 1200px ） 宽度为 1170px
- 中屏（ >= 992px ） 宽度为 970px
- 小屏（ >= 768px ） 宽度为 750px
- 超小屏 （ 100% ）
<body> <div class="container" style="background: #2aabd2">大数据男孩</div> </body>
container-fluid 类
- 流式布局容器 百分百宽度
- 占据全部视口（viewport）的容器
- 适用于单独的移动端
<body> <div class="container-fluid" style="background: #2aabd2">大数据男孩</div> </body>
栅格系统
Boostrap 自动把页面划分为最多 12格 等宽的列，然后通过所占列数进行模块化布局。
- 在不同的屏幕尺寸下
小格的宽度是不同的，但一定是等分屏幕宽度。
栅格系统选项参数
栅格系统用于一系列的行（row）与列（column）的组合来创建页面布局。
| - | 超小屏幕（手机）< 768px | 小屏设备（平板）>= 768px | 中等屏幕（桌面显示器） >=992px | 宽屏设备（大桌面显示器）>= 1200px |
|---|---|---|---|---|
| container 最大宽度 | 自动（100%） | 750px | 970px | 1170px |
| 类前缀 | .col-xs | .col-sm | .col-md | .col-lg |
<!--布局装在容器里 -->
<div class="container">
<!--每一行-->
<div class="row">
<!--大屏下每一行占 12 份-->
<div class="col-lg-12">大数据男孩</div>
</div>
<div class="row">
<!--大屏下每一行占 3 份-->
<!--中屏下每一行占 6 份-->
<div class="col-lg-3 col-md-6">大数据男孩</div>
<div class="col-lg-3 col-md-6">大数据男孩</div>
<div class="col-lg-3 col-md-6">大数据男孩</div>
<div class="col-lg-3 col-md-6">大数据男孩</div>
<div class="col-lg-3 col-md-6">大数据男孩</div>
<div class="col-lg-3 col-md-6">大数据男孩</div>
</div>
</div>
列嵌套
直接嵌套，会有边距
<!--布局装在容器里 -->
<div class="container">
<!--每一行-->
<div class="row">
<div class="col-md-12">
<!--嵌套-->
<div class="col-md-6">大数据男孩</div>
<div class="col-md-6">大数据男孩</div>
</div>
</div>
</div>
套在一个 row 里
<!--布局装在容器里 -->
<div class="container">
<!--每一行-->
<div class="row">
<div class="col-md-12">
<!--加一个 row -->
<div class="row">
<div class="col-md-6">大数据男孩</div>
<div class="col-md-6">大数据男孩</div>
</div>
</div>
</div>
</div>
列偏移
使用 col-md-offset-* 类可以将列向右偏移，这些类实际是通过使用*选择器为当前元素增加了左侧的边距(margin)。
<!--布局装在容器里 -->
<div class="container">
<div class="row">
<!-- 4 + 4 + 4 = 12 格 -->
<div class="col-md-4">大数据男孩</div>
<!--中等屏幕向右偏移 4 格 -->
<div class="col-md-4 col-md-offset-4">大数据男孩</div>
</div>
<div class="row">
<!-- 2 + 8 + 2 = 12格-->
<div class="col-md-8 col-md-offset-2">大数据男孩</div>
</div>
</div>
列排序
通过使用 col-md-push-* 和 col-md-pull-* 类就可以很容易改变 column 的顺序。
col-md-push-*：左 --> 右col-md-pull-*：右 --> 左
<!--布局装在容器里 -->
<div class="container">
<div class="row">
<!-- 原本 -->
<div class="col-md-8">左侧</div>
<div class="col-md-4">右侧</div>
</div>
<div class="row">
<div class="col-md-8 col-md-push-4">左侧</div>
<div class="col-md-4 col-md-pull-8">右侧</div>
</div>
</div>
响应式工具
为了方便在不同屏下，实现隐藏和显示元素
| 类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
|---|---|---|---|---|
| hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
与之相反的，是
visible-xs、visible-sm、visible-md、visible-lg在相应屏下显示。
<!--布局装在容器里 -->
<div class="container">
<div class="row">
<div class="col-md-4 hidden-md">中屏隐藏</div>
<div class="col-md-4">2</div>
<div class="col-md-4">3</div>
</div>
</div>
上一篇
LayUI 入门使用
LayUI 入门使用
版权声明：《 Boostrap 布局入门 》为明妃原创文章，转载请注明出处！
最后编辑:2020-4-8 10:04:42