概述
一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。
Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
1 | * 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。 |
快速入门
- 下载Bootstrap
- 在项目中将这三个文件夹复制
- 创建html页面,引入必要的资源文件
快速入门,引入文件
1 |
|
响应式布局
- 同一套页面可以兼容不同分辨率的设备。
- 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
- 步骤:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
161. 定义容器。相当于之前的table
* 容器分类:
1. container:两边留白
2. container-fluid:每一种设备都是100%宽度
2. 定义行。相当于之前的tr 样式:row
3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
* 设备代号:
1. xs:超小屏幕 手机 (<768px):col-xs-12
2. sm:小屏幕 平板 (≥768px)
3. md:中等屏幕 笔记本 (≥992px)
4. lg:大屏幕 台式 (≥1200px)
* 注意:
1. 一行中如果格子数目超过12,则超出部分自动换行。
2. 栅格类属性可以向上兼容。
3. 向下会占整行。
- 示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<!--1.定义容器 table-->
<!--container 两边留白,container-fluid 撑满-->
<div class="container">
<!--2.定义行 tr-->
<div class="row">
<!--台式,笔记本 显示一行-->
<!--手机,平板 显示两行-->
<div class="col-md-6 inner">栅格</div>
<div class="col-md-6 inner">栅格</div>
</div>
<div class="row">
<!--台式 显示一行,只占8列-->
<!--台式 显示一行,撑满占12列-->
<!--手机,平板 显示两行-->
<div class="col-md-6 col-lg-4 inner">栅格</div>
<div class="col-md-6 col-lg-4 inner">栅格</div>
</div>
</div>
CSS样式和JS插件
- 全局CSS样式:https://v3.bootcss.com/css/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20* 按钮:class="btn btn-default"
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<button type="button" class="btn btn-success">(成功)Success</button>
<button type="button" class="btn btn-info">(一般信息)Info</button>
<button type="button" class="btn btn-warning">(警告)Warning</button>
<button type="button" class="btn btn-danger">(危险)Danger</button>
<button type="button" class="btn btn-link">(链接)Link</button>
* 图片:
* class="img-responsive":图片在任意尺寸都占100%
* 图片形状
* <img src="..." alt="..." class="img-responsive img-rounded">:方形,占100%
* <img src="..." alt="..." class="img-circle"> : 圆形
* <img src="..." alt="..." class="img-thumbnail"> :相框
* 表格
* table 基本实例
* table-bordered 边框
* table-hover 鼠标悬停
<table class="table table-bordered table-hover">
* 表单
* 给表单项添加:class="form-control" - 组件:https://v3.bootcss.com/components/
- 导航条
- 分页条
- 插件:https://v3.bootcss.com/javascript/
- 轮播图