bootstrap使用总结

9.11

常用单位总结

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等份。场景：做适配。

bootstrap

栅格系统

 <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列。

可以自由控制每个盒子所占的份数

屏幕划分

超小屏幕 手机(<768px)	小屏幕 平板(>=768)	中等屏幕 桌面显示器 (>=992px)	大屏幕 大桌面显示器(>=1200px)
自动	750px	970px	1170px

列偏移

 <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来设置大屏幕的列偏移。数字是设置偏移的份数。其他屏幕尺寸下也是运用相同的方法。控制好份数，即可达到效果。

全局样式

当我们引入bootstrap时，可以根据需要引入。必须要引入的是bootstrap.min.css

 <link rel="stylesheet" href="./css/bootstrap.min.css" />

我们引入js和cs时，建议选择后缀为min.*结尾的轻量包。

响应式工具的显示和隐藏

 <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)控制盒子在大屏幕(中等屏幕、小屏幕、超小屏幕)隐藏

组件及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>