BootStrap_day02

一.响应式布局
1.媒体查询
媒体查询分为两种方式：
(1)根据媒体查询结果使用不同的外部css文件




注意：此方法较少用，所有css都会被浏览器加载，每个css文件中可能会存在重复代码。
(2)根据媒体查询的结果执行同一个css文件中的不同代码块。
@media screen and (min-width:992px){
选择器{样式}
}
二.Bootstrap
1.Bootstrap css框架
英文官网：http://getbootstrap.com
中文官网：http://www.bootcss.com
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
2.Bootstrap内容分为5部分
(1)如何使用-起步
(2)全局CSS样式类
(3)组件
(4)js插件
(5)定制（scss）
3.Bootstrap第一步：起步
(1)设置基本模板

			在body中<div class="container"></div>

4.Bootstrap第二步：全局CSS类
1.特点：
(1)所有标记的默认样式都统一化-重写
body,p,h1~h6,ul,dl等重写样式
(2)设置box-sizing:border-box
2.全局css样式-按钮相关
不同样式按钮：
.btn 基本按钮
.btn-danger 危险
.btn-warning 警告
.btn-success 成功
.btn-info 信息
.btn-primary 主要按钮
.btn-secondary 次要按钮
.btn-dark 黑色
.btn-light 浅色
.btn-link 链接
不同边框按钮：
.btn-outline-primary 主要按钮
.btn-outline-success 成功
.btn-outline-info 信息
…
不同大小：
.btn-lg 大按钮
.btn-sm 小按钮
.btn-block 块级按钮
3.全局css样式-图片相关
.rounded 圆角图片
.rounded-circle 椭圆图片
.img-thumbnail 缩略图
.img-fluid 响应式图片
4.全局css样式-文本相关
.h1-.h6
.text-danger/success/info/dark/light/primary/muted 文字颜色
.text-uppercase/lowercase/capitalize 大写/小写/首字母大写
.text-left/center/right/justify/nowrap 对齐方式
.font-weight-bold 加粗
.font-weight-light 更细
.font-weight-normal 普通
.font-italic 斜体
5.全局css样式-列表相关
.list-unstyled 去除标识的效果
.list-inline 行内列表
.list-group/list-group-item 创建列表组
.active 激活状态
.disabled 禁用状态
列表项颜色：
.list-group-item-danger/success/warning/info/primary/dark/linght…
6.全局css样式-表格相关
.table
.table-bordered 带边框的表格
.table-striped 隔行变色的表格
.table-hover 带鼠标悬停效果的表格
.table-primary/success/danger/dark…表格颜色
.table-responsive 响应式表格，用于table的父元素上
7.全局css样式-辅助类
浮动：
.float--left/float--right 左/右浮动
.clearfix 清除浮动
显示：
.visible/invisible 可见/隐藏
背景：
.bg-success/info/danger/warning/dark…
边框：
.border/border-0/border-top/border-bottom/border-left/border-right 边框设置
.border-success/info/danger/warning…边框颜色
边框圆角：
.rounded/rounded-0 边框圆角
.rounded-top/bottom/left/right
居中对齐：
.m-auto 设置居中对齐
边距：
m-0/1/2/3/4/5/ml/mr/mt/mb 来设置外边距
p-0/1/2/3/4/5/pl/pr/pt/pb 来设置内边距
宽度：
w-25/50/75/100 来设置元素的宽度
高度：
h-25/50/75/100 来设置元素的高度
8.全局css样式-栅格布局（重点）
web页面的布局方法有三种：
(1)table布局
优点：简单，容易控制
缺点：语义错误，渲染效率低
(2)div+css布局
优点：语义正确，渲染效率高
缺点：控制起来比较麻烦
(3)Boostrap的栅格布局
优点：简单，容易控制，语义正确，渲染效率高（div+css）
缺点：如果页面太复杂不太合适
栅格布局的使用：
1.最外层需要使用容器
.container 定宽的容器
.container-fluid 变宽的容器
2.容器中添加行
.row(一行均分为12等份)
3.行中添加列
.col(每个列都需要指定宽度的占比n/12)
ex：
.col-6 占整行一半宽度

课后作业：
1.搭建bootstrap模板页
2.用媒体查询技术完成"课后作业"文件夹中的效果
3.开发个人项目