bootstrap是由Twitter退出的一个用于前端开发的开发工具包，其中包含了许多简洁大方的css样式和实用的js插件，当然，它是移动设备优先的响应式开发方式。
breakpoints断点定义
- bootstrap的响应式breakpoints定义
- 首先是移动设备有限，所以默认情况的样式是针对移动设备的，往上主要就是两个断点： md(>=768px iPad)、lg(>=992px正常的Web尺寸)
栅格系统
1 | <div class="row"> |
Utilities
从
4.x才开始的有几种常见样式并不存在于
utilities里面，如font-size/line-height/height，建议直接写在html的style里
Border
需要注意的是border不支持breakpoints
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26border
border-top
border-right
border-bottom
border-left
border-bottom-0
border-radius
rounded
rounded-top
rounded-right
rounded-bottom
rounded-left
rounded-circle # 圆形
rounded-0 # 没有圆角
border-color
border-primary
border-secondary
border-success
border-danger
border-warning
border-info
border-light
border-dark
border-white
Color
设置字体颜色
1
2
3
4
5
6
7
8
9
10.text-primary
.text-secondary # 深灰色
.text-success
.text-danger # 红色
.text-warning
.text-info
.text-light # 浅灰色
.text-dark # 黑色
.text-muted
.text-white设置背景颜色
1
2
3.bg-secondary # 深灰色
.bg-light # 浅灰色
.bg-dark # 黑色
Cursor
- 只要给元素加上
role="button"即可增加cursor: pointer属性
Display
- 以d开头
- 可取的值有none、inline、inline-block、block、table、table-cell、table-row、flex、inline-flex
| 屏幕尺寸 | 类 |
|---|---|
| 只在lg隐藏 | d-lg-none d-xl-block |
| 在lg和xl隐藏 | d-lg-none d-xl-none |
| 只在xl隐藏 | d-xl-none |
| 只在lg显示 | d-none d-lg-block d-xl-none |
| 在lg和xl显示 | d-none d-lg-block d-xl-block |
| 只在xl显示 | d-none d-xl-block |
Flex
1 | d-flex # flex布局 |
Sizing
不支持breakpoint
宽度
1
2
3
4w-25
w-50
w-75
w-100 # width: 100%高度
1
2
3
4h-25
h-50
h-75
h-100 # height: 100%
Overflow
1 | overflow-auto |
Positoin
1 | position-static |
Spacing
- m表示margin，p表示padding
- t、b、l、r分表表示top、bottom、left、right
- x表示水平方向left和right
- y表示垂直方向top和bottom
- 可以加上响应式参数{property}{sides}-{breakpoint}-{size}
- size的取值有0、1、2、3、4、5、auto
Text
align item
1
2
3
4
5align-item-center
align-item-start
align-item-end
align-item-baseline
align-item-stretchtext alignment
1
2
3
4
5
6
7text-left
text-center
text-right
添加breakpoint
text-sm-left
text-md-leftfont weight
1
2
3
4
5font-weight-bolder
font-weight-bold # 700
font-weight-normal # font-weight: 400
font-weight-light
font-italic # 斜体wrap
1
2text-nowrap
text-truncate # 截断，用省略号表示justify-content
1
2justify-content-center
justify-content-betweenvertical-align
1
align-middle # vertical-align: middle
特殊功能(使用Tips)
**下拉选择列表(需要bootstrap.js)**：
1
2
3
4
5
6
7
8
9<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>input的属性(居然没有哪个地方写了的，我也是醉了，难道只有我没有找到，还是只有我什么基础都没有还来用bootstrap):
1
2
3<input placeholder="Enter email"> placeholder属性表示在输入框内预先显示的文字
<input type="email"> type会影响到该输入框的展现形式，它的值可以是checkbox、email、file、password、text(文本输入框)
<input class="form-control"> input只有加了这个类才会呈现得好看一点，并且默认宽度会变成100\%表单里面点击按钮禁止跳转，不要讲button的type设置为subbmit或者不设置，必须将其设置为
type="button"才不会强制刷新当前页面使用jquery控制
carousel跳转:1
2
3
4
5
6
7
8
9$('.carousel-control').click(function(e){
e.stopPropagation();
var goTo = $(this).data('slide');
if(goTo=="prev") {
$('#carousel-id').carousel('prev');
} else {
$('#carousel-id').carousel('next');
}
});
常用网址
百度的CDN： http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js 全局CSS样式：http://v3.bootcss.com/css/ 组件：http://v3.bootcss.com/components/ JavaScript插件：http://v3.bootcss.com/javascript/ jQuery UI Bootstrap：http://www.bootcss.com/p/jquery-ui-bootstrap/ Glyphicons字体图标：http://v3.bootcss.com/components/#glyphicons **实例精选(几个简单的模板)**：http://v3.bootcss.com/getting-started/#examples
](http://haofly.net/wp-content/uploads/2014/12/2014-the-last4.jpg){kind=link}