这是我参与8月更文挑战的第2天，活动详情查看： 8月更文挑战
Bootstrap
一、响应式网页
Response web page 响应式网页/自适应
可以根据浏览设备的不同(pc、phone、分辨率、尺寸、横竖屏)
而自动改变页面的布局，文本，图片的大小
不会影响用户浏览体验
测试响应式网页
1.使用真实设备测试
优点：真实可靠
缺点：成本太高，测试周期很长
2.第三方测试软件
优点：测试方便，简单
缺点：很多硬件是测试不了
3.使用浏览器自带的测试软件
优点：简单
缺点：及其不靠谱
4.学习的时候，拖放浏览器尺寸
1.编写响应式网页
1）移动端配置视口
只在pc上运行，可以不配置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
width=device-width <!--视口宽度为设备宽度-->
initial-scale=1.0 <!--视口初始化时不能缩放-->
maximum-scale=1.0 <!--最大缩放为1倍-->
user-scalable=yes <!--用户可以缩放-->
<!--最简方式-->
<meta name="viewport" content="width=device-width, initial-scale=1">
2）编写响应式
内容，图片尽量用相对单位，不要使用绝对值
多使用弹性布局和流式布局(默认文档流+浮动)
3）媒体查询技术
为一个网页写多份css代码
根据浏览网页的设备不同，执行其中一份css，忽略其他的css代码
媒体查询完成响应式布局，会极大的增加代码量
复杂页面，不建议使用响应式
2.使用媒体查询
@media /*条件1 and 条件2 and 条件3*/{
#content{width:50%}
#d1{color:red}
}
@media /*条件4 and 条件5 and 条件6*/{
#content{width:100%}
#d1{color:green}
}
媒体查询的条件
1、设备 screen （pc/pad/phone）
TV
print
2、屏幕尺寸，约定俗成把所有屏幕尺寸分为5类
超大屏 xl v>=1200px min-width:1200px
大屏 lg 992px<=v<1200px min-width:992px and max-width:1199.99px
中屏 md 768px<=v<992px
小屏 sm 576px<=v<768px
超小屏 xs v<576px
标准响应式写法
/*不要带超小屏*/
@media (min-width:576px){
}
@media (min-width:768px){
}
@media (min-width:992px){
}
@media (min-width:1200px){
}
二、Bootstrap
为了让开发这快速快发，boot把很多样式封装成了类
我们只需要写相对的类名
1、起步---如何使用
2、全局css样式
3、组件和js插件
4、定制sass
1.如何使用boot
/*定义视口*/
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
/*引入css*/
<link rel="stylesheet" href="css/bootstrap.css">
/*引入三个js，必须按照顺序引入*/
<script src="js/jquery.min.js" ></script>
<script src="js/popper.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>
/*所有的boot代码要求写在div.container中*/
2.全局样式
1）容器
.container 定宽容器，在不同屏幕下都有最大宽度
.container-fuuid 变宽容器，宽度永远是body的100%
所有boot代码必须写在容器里
2）按钮相关的class
.btn 基本类，每个按钮必须加
行内块，文本，伪类
带颜色的按钮
btn-danger/warning/success/info/primary/secondaty/dark/light
红/黄/绿/深蓝/浅蓝/浅黑/深黑/灰
镂空按钮
.btn-outline-danger
按钮大小
.btn-lg/sm/block
3）图片相关
rounded 4px圆角
rounded-circle 50%圆角
img-thumbnail 带边框，带内边距的缩略图
img-fluid 响应式图片，可以缩放，但是不能超过图片本身的100%
4）文本相关
文本颜色
text-muted/danger/warning……
大小写，首字符大写
text-uppercase/lowercase/capitalize
字体加粗
font-weight-light/normal/bold
斜体 font-italic
字号 .h1~~.h6
水平对齐方式 text-align:left/center/right/justify
text-*-left/center/right *:sm/md/lg/xl
boot没有封装响应式的justify
5）列表相关
list-unstyled 去点
列表组
ul.list-group
>li.list-group-item
.list-group-item-danger/info/warning
6）table相关
table 基本类
table-bordered 带边框
table-danger/warning/info…… 表格背景
table-striped 各行变色，在奇数行添加一层0.05的黑纱
table-hover 鼠标悬停时，给tr添加0.075的黑纱
7）辅助类
边框
border/border-top/border-bottom/border-left 基本类
去除边框
border-0/border-top-0/border-right-0/border-left-0/border-bottom-0
边框颜色
border-danger/warning/info……
背景颜色
bg-transparent/white/danger/info……
圆角
rounded 4px的圆角
rounded-circle 50%
rounded-top/right/bottom/left 设置某个方向的两个圆角
rounded-0
浮动
float-*-left/right/none *:sm/md/lg/xl
父元素解决高度坍塌 clearfix
尺寸
w-25/50/75/100
h-25/50/75/100
内外边距
m/mt/mr/mb/ml/mx/my-*-0/1/2/3/4/5/auto
p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5
*:sm/md/lg/xl
0 0
1 0.25rem
2 0.5rem
3 1rem
4 1.5rem
5 3rem
三、栅格布局
boot封装栅格的目的，就为了简化响应式
栅格布局，把所有的布局看作一行
用列数来标识每一个块占据宽度的大小
一行一共12列
1.语法
div.row
>div.col-1/2/3/4/5/6/7/8/9/10/11/12
响应时 col-*-1/2/3/4/5/6/7/8/9/10/11/12
*:sm/md/lg/xl
2.源码解析
.row 弹性，可换行 左右-15px外边距。让div左右变大15px
.no-gutters 清除row的左右-15px的外边距和col的左右+15px的内边距
.col-n 左右+15px内边距 flex:0 0 n/12;
3.不带数字的col
.col
源码 flex-basis:0 基本宽度为0
flex-grow:1 主轴有多聚空间的时候，把多余空间平局分配给每一个.col
导致不管有多少个.col。都会平均分布主轴空间，直到放不下，换行
特点：1、不按照一行12份来计算
2、一行的col可以远远超过12个
4.栅格的列偏移
offset-*-n *:sm/md/lg/xl n:1-11
源码 margin-left
四、弹性布局
d-*-none.block/inline/inline-block/flex
*:sm/md/lg/xl
boot对弹性的封装特别好
d-*-flex
主轴的方向
flex-*-row flex-*-row-reverse flex-*-column flex-*-column-reverse
项目是否换行
flex-*-wrap/nowrap
项目在主轴上的排列方式
justify-content-*-start/center/end/baseline/stretch
项目在交换轴上的排列方式
align-item-*-start/center/end/baseline/stretch
栅格和弹性的关系
只要父元素设置了弹性，x轴左向右的主轴，可换行，就可以当作栅格的row来用
五、关于input的样式
.form-control boot为文本框封装的样式
组件
在项目中有很多样式特效和js特效
通过样式和自定义属性方式，把特效进行了封装
只要我们把类名和自定义属性写对，就能完成特效
boot封装的特效，样式和功能都是有限的
boot使用自定义属性的方式，来调用封装好的js特效
1、哪个元素激活方式
2、方法影响的是哪个元素
1.按钮组
把多个按钮，放在一个组里显示
div.btn-group 弹性，x轴 水平按钮组
>a.btn
.btn-group-vertical 弹性，y轴 垂直按钮组
.btn-group-lg/sm 设置按钮组大小
2.下拉菜单
结构：
div.dropdown 相对定位
>btn.dropdown-toggle 添加一个向下的小按钮
+ul.dropdown-menu 隐藏
事件
1、哪个元素激活方式，按钮 data-toggle=“dropdown"
2、方法影响的是哪个元素，由于在同一个父元素结构下，不需要写时间影响的目标
3.信息提示框
结构
div.alert 基本类
.alert-danger/warning…… 提示框的颜色
.alert-dismissible 让后代.close颜色与背景色匹配
>.close 小叉叉
事件
1、哪个元素激活方式 小叉子 data-dismiss="alert"
2、方法影响的是哪个元素 不需要定义目标元素
4.导航
1）水平导航
ul.nav 弹性，x轴
>li.nav-item
>a.nav-link
2）选项卡导航
ul.nav.nav-tabs 让内部所有的nav-link变成选项卡的样式
>li.nav-item
>a.nav-link 被选中.active
div.tab-content
>div.tab-pane 与tab-content配合，隐藏
事件
1、触发事件的元素 a data-toggle="tab"
2、目标元素 div.tab-pane 在a中绑定，事件目标herf="#目标id"
3）胶囊导航
ul.nav.nav-pills
>li.nav-item
>a.nav-link
div.tab-content
>div.tab-pane
事件
1、触发事件的元素 a data-toggle="pill"
2、目标元素 div.tab-pane 在a标签中绑定 事件目标 href="#目标id"
5.响应式导航栏
div.navbar 相对定位，弹性，x轴，主轴两端对齐，交叉轴居中
.navbar-expand-sm/md/lg/xl
如果这个选择器成立，那么他的儿子navbar-nav的主轴变成x轴
如果不成立，他的儿子navbar-nav的主轴是默认的y轴
>ul.navbar-nav 弹性，y轴
>li.nav-item
>a.nav-link
6.折叠效果
.btn
div.collapse 隐藏
事件
1、激发事件的元素 .btn data-toggle="collapse"
2、事件目标 div 在btn中data-target="#div的id"
7.卡片
div.card
>div.card-header
+div.card-body
+div.card-footer
8.折叠导航栏
div.navbar
.navbar-dark 让内部3个部分的文本，都变为浅色
.bg-dark
.navbar-expand-lg 1、让按钮在lg以上隐藏，在lg以下显示
2、让ul在lg以上横向，在lg以下纵向
3.让div.navbar-collapse在lg以上显示，在lg以下隐藏
>a.navbar-brand 被父元素navbar-dark设置为浅色
+button.navbar-toggler 配合父元素navbar-expand-lg 让按钮在lg以上隐藏，lg以下显示
>span.navbar-toggle-icon 被父元素navbar-dark设置为浅色
+div.collapse display:none 隐藏
.navbar-collapse 配合navbar-expand-lg，在lg以上显示，lg以下隐藏
9.徽章
基本类 .badge
颜色 badge-danger/warning/info
胶囊徽章 badge-pill
10.巨幕
jumpotron 巨大的内边距，带背景色
11.面包屑导航
ul.breadcrumb
>li.breadcrumb-item
>a
12.分页条
ul.pagination 弹性，x轴
>li.page-item 让第一个li内部的a标签有左上，左下圆角
让最后一个li内部的a标签有右上，右下圆角
13.焦点轮播图
div.carousel
>div.carousel-inner w100 溢出隐藏
>div.carousel-item display:none;w100
.active 显示
>img.w-100
第一部分的事件，在最外层添加data-ride="carousel"
这个事件，可以让图片显示，同时让轮播指示器的点跟着图片动
轮播指示器，与carousel-inner平级
ul.carousel-indicators
>li 第一个li添加.active
事件：
1、激活事件的元素 li data-slide-to="n" n对应图片，以0开头
2、事件影响的目标 li绑定最外层div.carousel的id data-target="#demo"
左右箭头
a.carousel-control-next/prev
>span.carousel-control-next/prev-icon
事件：
1、激活事件的元素 a data-slide="prev/next"
2、事件影响的目标元素 a的href中绑定最外层div.carousel的id href="#demo"
14.进度条
div.progress 定义进度条的槽
>div.progress-bar 定义进度条
.w-100 定义进度
.bg-secondary 定义背景色
.progress-bar-striped 带条纹的进度条
.progress-bar-animated 条纹动画进度条
