1.常用单位总结
1.px pt em rem vw 几个单位
2.px 绝对单位 网页布局最常用的单位，一般用于pc端布局。px像素的意思。版心是1200px
3.pt 点 常用于印刷。或者ios常用的单位。我们前端基本不用。
4.em 相对单位。1em就是当前一个文字大小。场景：段落首行缩进2个字。text-indent:2em;
5.rem 相对单位。相对于html标签的文字大小，跟其余标签没有任何关系。场景：做适配。
6.vw 可以看作是适配的终极版本。vw也是相对单位。vw把屏幕划分了100等份。场景：做适配。
2.bootstrap
2.1栅格系统
<div class="container">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">123</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">123</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">123</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">123</div>
</div>
.container div {
height: 150px;
background-color: pink;
}
.container div:nth-child(2n) {
background-color: skyblue;
}
大屏以及中屏
小屏幕
超小屏幕
lg： large 最大 col-lg-3 表示在大屏幕下占三份
md：medium 中等 col-md-3 表示在中等屏幕下占三份
sm：small 小 col-sm-3 表示在小屏幕下占三份
xs：Extra Small 超小 col-xs-3 表示在超小屏幕下占三份
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
可以自由控制每个盒子所占的份数
2.2屏幕划分
| 超小屏幕 手机(<768px) | 小屏幕 平板(>=768) | 中等屏幕 桌面显示器 (>=992px) | 大屏幕 大桌面显示器(>=1200px) |
|---|---|---|---|
| 自动 | 750px | 970px | 1170px |
2.3列偏移
<div class="container">
<div class="row one">
<div class="col-lg-4"></div>
<div class="col-lg-4 col-lg-offset-4"></div>
</div>
</div>
.row div {
height: 150px;
background-color: pink;
}
.one div:nth-child(1) {
background-color: purple;
}
**我们可以通过col-lg-offset-4来设置大屏幕的列偏移。数字是设置偏移的份数。其他屏幕尺寸下也是运用相同的方法。控制好份数，即可达到效果。
2.4全局样式
当我们引入bootstrap时，可以根据需要引入。必须要引入的是bootstrap.min.css
<link rel="stylesheet" href="./css/bootstrap.min.css" />
我们引入js和cs时，建议选择后缀为min.*结尾的轻量包。
2.5响应式工具的显示和隐藏
<div class="container">
<div class="row">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3 hidden-sm">3</div>
<div class="col-md-3">4</div>
</div>
.row div {
height: 150px;
background-color: pink;
}
.row div:nth-child(2n) {
background-color: purple;
}
大屏幕下
小屏幕下
我们可以通过给相应的盒子加hidden-lg(md、sm、xs)控制盒子在大屏幕(中等屏幕、小屏幕、超小屏幕)隐藏
2.6组件及js插件
注意：当我们使用bootstrap3时。当我们需要引入js实现功能时，一定要先引入jquery，再引入对应的bootstrap中的min.js。引入顺序不能错，引入相关功能时基于jquery实现的，所以要先引入jquery。
使用bootstrap实现轮播图时。
ol中是实现的小圆点功能
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic"
data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic"
data-slide-to="1"></li>
<li data-target="#carousel-example-generic"
data-slide-to="2"></li>
<li data-target="#carousel-example-generic"
data-slide-to="3"></li>
</ol>
carousel-inner 实现的是图片功能
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./images/banner_1.jpg" alt="..." />
<div class="carousel-caption">第一张图片</div>
</div>
<div class="item">
<img src="./images/banner_2.jpg" alt="..." />
<div class="carousel-caption">第二张图片</div>
</div>
<div class="item">
<img src="./images/banner_3.jpg" alt="..." />
<div class="carousel-caption">第三张图片</div>
</div>
<div class="item">
<img src="./images/banner_4.jpg" alt="..." />
<div class="carousel-caption">第四张图片</div>
</div>
Controls 实现左右箭头功能
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
\
