一.响应式布局 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.开发个人项目
