bootstrap（2）

一、bootstrap
简单、直观、强悍的前端开发框架，让web开发更简洁，快速
英文官网：http://getbootstrap.com
用于开发响应式布局、移动设备优先的web项目
1.全局样式 1rem=16px
1.1按钮样式 class
基本类 btn
btn-danger 红色
btn-success 绿色
btn-warning 黄色
btn-info 蓝色
btn-parimary 主要
btn-secondary 次要
btn-dark 深色
btn-light 浅色
不同边框
btn btn-outline-success 绿色边框
上面的按钮样式都支持
不同按钮大小
btn-lg 大按钮
btn-sm 小按钮
btn-block 块级按钮
btn-link 链接按钮
1.2图片相关
rounded 圆角
rounded-circle 圆角 50%
img-thumbnail 缩影图
img-fluid 响应式图片，图片会缩放 但不会超过原始大小
1.3文字相关class
字体颜色
text-danger/success/info/warning/primary…
字体粗细
font-weight-bold/light/normal
文字对齐方式
text-left/center/right/justify
大小写/首字母
text-uppercase/lowercase/capitalize
字体大小 .h1~.h6
1.4列表选项
list-unstyled 去除标识符
基本类 ul list-group 创建列表组
li list-group-item 列表项
active 列表项激活状态
disabled 禁用状态
列表颜色
list-group-item-success/danger/info/warning…
1.5table相关样式
table 类名 让后面的td有上边框
table-bordered 带边框的表格
table-striped 隔行变色
table-hover 带悬停效果的表格
table-primary/danger/warning…表格颜色
响应式表格，用于table父元素上
table-responsive-sm/lg/md/xl
2.辅助类
2.1边框
border 基本类或者border-top/left/right/bottom
颜色border-success/info/warning…
清除边框 border-0 border-top-0
倒角 rounded
清除倒角 round-0
2.2显示
visible 显示
invisible 隐藏
2.3背景
bg-success/warning/info…
2.4浮动
float-left/float-x-left
float-right/float-x-right
x代表分辨率：xl/lg/md/sm
解决高度坍塌，父元素中加clearfix
2.5尺寸
w-x/h-x
x:25/50/75/100
25%，50%，75%，100%
2.6内外边距
m-x/mt-x/mb-x/ml-x/mr-x
p-x/pt-x/pb-x/pl-x/pr-x
x:0/1/2/3/4/5 0rem 0.25rem 0.5rem 1rem 1.5rem 3rem
3.栅格布局（重点）
3.1web页面布局方法（三种）

使用栅格布局
3.1.1最外层需要容器
container定宽容器
container-fluid 变宽容器
3.1.2容器中声明行 row（每一行等分位12个单元格）
3.1.3行中声明列 col col-n（n最多12最少1）
3.1.4针对不同屏幕的需求使用不同的列名
col-xl-1/2/3/4…12
col-lg-1/2/3/4…12
col-md-1/2/3/4…12
col-sm-1/2/3/4…12
xl Extra large >=1200px
xs Extra small 超小屏
col不添加数字 ，自动处理布局 每一行的列宽度相等
3.1.5注意：不同屏幕下的列有适应性问题
col-xl-* 只在超大屏幕下有效
col-lg-* 在lg/xl 下有效
col-md-在xl/lg/md 下有效
col-sm- 在xl/lg/md/sm/下有效
总结：列在当前屏幕下以及更大屏幕下有效

<div class="col col-lg-6 col-md-3 col-sm-3" ></div>
省略为：<div class="col col-lg-6 col-sm-3"></div>

3.1.6可以使用“列偏移”实现指定列以及后面的列向右偏移
偏移量通过offset-*-n实现
*：sm/md/lg/xl
n:1~11