1、介绍
bootstrap是来自twitter的一个前端框架,基于html、css、js和jquery,能够快速、灵活的开发具备良好可视化的界面与功能。
目前主要有3、4、5版本,一般使用版本3即可。
Bootstrap 教程 | 菜鸟教程 (runoob.com)
2、下载
起步 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
3、布局容器
<div class="container>
</div>
- bootstrap需要为页面内容和栅格系统包裹容器
- .container类用于固定宽度并支持响应式布局的容器
- .container-fluid类用于100%宽度,占据全部视口的容器
4、栅格系统
- 系统根据屏幕或者视口,自动分为最多12列。
- 行row必须在布局容器中,而在行row中创建水平的列
- 列可以设置padding属性控制列与列之间的间隔
- 如果一行的列大于12,多余的元素作为一个整体另起行
- .col-md-*适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。
- .col-md-offset-*,将列向右侧偏移一个或多个单位
- 行中的列可以嵌套行,行再包含列
<div class="container>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>