Bootstrap(包括scss)复习

BootStrap

简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
中文镜像网站：http://www.bootcss.com
英文官网 http://getbootstrap.com
用于开发响应式布局、移动设备优先的 WEB 项目。

1.使用boot

1.创建boot02文件夹，在boot02中创建css和js文件，把4个文件复制进去，使用ws open boot02
2.在ws中new 新项目 boot02,在boot02中创建css和js，把4个文件复制进去

2.全局css样式,1rem=16px

1.按钮相关class
基本类 btn
btn-danger 危险红色
btn-success 成功绿色
btn-warning 警告黄色
btn-info 信息蓝色
btn-primary 主要
btn-secondary 次要
btn-dark" 深色
btn-light 浅色
不同边框按钮
btn-outline-danger 红色边框
btn-outline-success 绿色边框
btn-outline-info 蓝色边框
…其他颜色都适用
不同按钮大小
btn-lg 大按钮
btn-sm 小按钮
btn-block 块级按钮
btn-link 链接按钮

2.图片相关class
rounded 圆角
rounded-circle 圆角50%
img-thumbnail 缩略图
img-fluid 响应式图片，图片会缩放，但是不会超过原始大小

3.文字相关class
字体颜色
text-danger/success/info/primary/warning…
字体的粗细
font-weight-bold/light/normal
文字对齐方式
text-left/right/center/justify
大小写/首字母大写
text-uppercase/lowercase/capitalize
字体大小 .h1~.h6

4.列表相关class
list-unstyled 去除标识符
基本类 ul.list-group 列表组
li.list-group-item 列表项
acitve 列表项激活状态
disabled 禁用状态
列表项颜色
list-group-item-success/danger/warning…

5.table相关的样式
table类名，让后面的td有上边框
table-bordered 带边框的表格
table-striped 隔行变色
table-hover 带悬停效果的表格
table-primary/danger/warning。。。。 表格颜色
响应式表格，用于table父元素上
table-responsive-sm/lg/md/xl

3.辅助类

1.边框
border 基本类,或者border-top/right/bottom/left
颜色 border-danger/warning/info…
清除边框 border-0 border-top-0。。。。。
倒角 rounded
清除倒角 rounded-0
2.显示
visible 显示
invisible 隐藏
3.背景颜色
bg-danger/warning/success
4.浮动

float-left/float-*-left 
float-right/float-*-right 

代表屏幕分辨率：xl/lg/md/sm
解决高度坍塌，父元素中添加clearfix
5.尺寸
w-/h-*
*:25/50/75/100
25%，50%，75%，100%
6.内外边距

m-*/mt-*/mr-*/mb-*/ml-*
p-*/pt-*/pr-*/pb-*/pl-*

*:0 / 1 / 2 / 3 / 4 / 5
0 0.25rem 0.5rem 1rem 1.5rem 3rem

4.栅格布局(重点***********************************)

1.web文本页面布局方法(三种)

	table	div+css	Boot中栅格
优点	简单，易控制	语义正确，渲染效率高	简单，容易控制，语义正确，渲染效率高，支持响应式
缺点	语义错误，渲染效率低	代码编写和控制比较麻烦	页面非常复杂，不推荐使用

使用栅格布局
1.最外层需要使用容器
container 定宽容器 （容器宽度写死了）
container-fluid 变宽容器 (容器