bootstrp_组件

网页中有一些复杂的特殊效果，之前必须使用 js，dom，jq

boot为我们封装好了很多常见的组件，我门可以之间使用

方便快捷，但是如果需要个性化处理，比较繁琐

boot中，大量使用元素的自定义属性来调用方法

基本结构

<div class="dropdown">

  <button class="dropdown-toggle"

   data-toggle="dropdown"></button>

  <ul class="dropdown-menu"></ul>

</div>

<h2>下拉菜单</h2>
  <div class="dropdown">
   <!-- boot中通过自定义事件 data-toggle 来激活事件-->
  <botton class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</botton>
  <ul class="dropdown-menu text-center">
    <li><a href="#">青椒</a></li>
    <li><a href="#">泡椒</a></li>
    <li><a href="#">红椒</a></li>
    <li><a href="#">甜椒</a></li>
    <li><a href="#">灯笼椒</a></li>
  </ul>
  </div>

div .dropdown  父级，相对定位

button .dropdown-toggle  画下拉三角

ul .dropdown-menu  隐藏display:none

data-toggle=”dropdown” 自定义属性的作用

1.当button被点击时，激活事件

2.自定义属性的值绝对激活哪一个事件

<div class="btn-group btn-group-lg">
  <a href="#" class="btn btn-dark">冬瓜</a>
  <a href="#" class="btn btn-danger">南瓜</a>
</div>

h2>按钮组</h2>
  <div class="btn-group btn-group-lg">
  <a href="#" class="btn btn-dark">冬瓜</a>
  <a href="#" class="btn btn-danger">南瓜</a>
  <a href="#" class="btn btn-primary">西瓜</a>
  <a href="#" class="btn btn-secondary">北瓜</a>
  <a href="#" class="btn btn-warning">丝瓜</a>
  </div>
  <hr/>

 外层div中class有如下值

.btn-group横向按钮组
btn-group-vertical纵向按钮组
可以添加btn-group-sm/lg调整按钮大小

<div class="alert alert-warning alert-dismissible">
  <span class="close" data-dismiss="alert" >

&times;

</span>

              提示信息
</div>

<h2>信息提示框</h2>
  <div class="alert alert-warning alert-dismissible">
    请检查钱包里面是否有钱<span class="close" data-dismiss="alert"><b>&times;</b></span>
  </div>
  <h2>水平导航</h2>
  <ul class="nav justify-content-around nav-justified">
    <li class="nav-item"><a href="#" class="nav-link btn btn-danger">酸菜</a></li>
    <li class="nav-item"><a href="#" class="nav-link btn btn-primary">甜菜</a></li>
    <li class="nav-item"><a href="#" class="nav-link btn btn-
  </ul>

alert基本类

alert-danger/warning/… 提示框颜色

alert-dismissible为了修饰内部span.close

.colse  右浮动

data-dismisss=”aleert” 自定义属性
   事件使用alert的方式运行

①水平导航

②选项卡导航

<h2>选项卡导航</h2>
    <!-- 选项-->
    <ul class="nav nav-tabs">
  <li class="nav-item"><a href="#pane1" class="nav-link" data-toggle="tab">麻将云集</a></li>
  <li class="nav-item"><a href="#pane2" class="nav-link" data-toggle="tab">万子</a></li>
  <li class="nav-item"><a href="#pane3" class="nav-link" data-toggle="tab">条子</a></li>
  <li class="nav-item"><a href="#pane4" class="nav-link" data-toggle="tab">筒子</a></li>
    </ul>
    <!-- 内容-->
    <div class="tab-content">
  <div id="pane1"   class="tab-pane">成都麻将，广东麻将，香港麻将，重庆麻将</div>
  <div id="pane2"   class="tab-pane">一万,二万，三万，四万，五万，六万，七万，八万，九万</div>
  <div id="pane3"   class="tab-pane">一条，二条，三条，四条，五条，六条，七条，八条，九条</div>
  <div id="pane4"   class="tab-pane">一筒，二筒，三筒，四筒，五筒，六筒，七筒，八筒，九筒</div>
    </div>

③胶囊导航

<h2>胶囊导航</h2>
    <ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#d1">电脑</a></li>
  <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#d2">手机</a></li>
    </ul>
    <div class="tab-content">
  <div id="d1" class="tab-pane" >mac 电脑联想电脑,华硕电脑,戴尔电脑,惠普电脑 </div>
  <div id="d2" class="tab-pane">iPhone，huawei，mi，Honor</div>
  </div>

 一个事件激活，关注几件事 
1.激活这个事件的元素         （data-toggle="collapse）

2.这个事件以什么方式激活     data-toggle"=" collapse "

3.这个事件激活后，改变的目标元素是谁  （data-target="#motai"）

div.navbar.navbar-expand-sl/lg/md/sm>ul.navbar-nav>li.nav-item>a.nav-link

<div .anvbar.navbar-expend-sl/lg/md/sm>

<ul .navbar-nav >

  <li .nav-item><a nav-link>

<h2>导航栏</h2>
  <div class="navbar navbar-expand-md">
  <ul class="navbar-nav ">
    <li class="nav-item"><a class="nav-link" href="#">小了白了兔了白</a></li>
    <li class="nav-item"><a class="nav-link" href="#">小了白了兔了白</a></li>
    <li class="nav-item"><a class="nav-link" href="#">爱了吃了萝了卜</a></li>
    <li class="nav-item"><a class="nav-link" href="#">爱了吃了萝了卜</a></li>
  </ul>
  </div>

.navbar-expend-sl/lg/md/sm:作用，作为子元素ul.navbar-nav的选择器条件，让ul.navbar-nav在主轴方向从y轴变成x轴

div.navbar-expend-*配合ul.navbar-nav可以让导航栏在不同屏幕下横向或纵向显示

响应式导航栏:

 lg: 大屏超大屏，li横向显示，中小屏纵向显示

<button data-toggle="collapse" data-target="#demo">

折叠</button>

<div class="collapse" id="demo">内容</div>

折叠，需要折叠内容添加 .collapsee （display：none）

折叠事件data-toggle=”collapse”

折叠目标：  如果是a标签，使用href=”#” ；

如果是button使用data-target=”#”

<h2>折叠效果</h2>
  <button class="btn btn-secondary" data-toggle="collapse" data-target="#bt_zd">显示折叠</button>
  <div class="collapse " id="bt_zd">show
  Lorem ipsum dolor sit amet, </div>

<div class="card">

    <div class="card-header"> </div>

    <div class="card-body"></div>

    <div class="card-footer"></div>

  </div>

<div #father>

  <div .card>

   <div .card-header>

     <a .card-link data-toggle=”colapse” href=#d1> 内容</a>

</div>

<div  data-parent=”#father” #d1 .collapse>

 <div .card-body>内容2</div>

</div>

   </div>

  </div>

1. .collapse不能和.card-body在同一个标签上，

  不然会发生折叠/显示的卡顿

  解决方案div.collapse>div.card-body

2.几个折叠部分，可以同时打开，而不能开启一个，其它的都关闭

  解决方案，在最外层div（card外部）上写id="parent"

  在所有div.collapse中添加事件的绑定data-parent="#parent"

  这样就可以保证在最外层div中，只有一个折叠区域可以打开了

<h2>手风琴（卡片+折叠）</h2>
  <div id="father">
  <div class="card">
  <div class="card-header">
    <a href="#d5" class="card-link" data-toggle="collapse">早餐</a>
  </div>
  <!-- 折叠隐藏部分-->
  <div data-parent="#father" class="collapse" id="d5">
    <div class="card-body">面条，包子，稀饭</div>
  </div>
 </div>
  <div class="card">
    <div class="card-header">
      <a href="#d6" class="card-link" data-toggle="collapse">中餐</a>
    </div>
    <div data-parent="#father" class="collapse" id="d6">
      <div class="card-body">青椒肉丝，鱼香肉丝，土豆肉丝</div>
    </div>
   </div>
  </div>

1.div.navbar-expend-sm和.navbar-toggler的关系

  .navbar-toggler显示按钮

祖先有.div.navbar-expend-sm的时候，.navbar-toggler这个按钮显示，

<h2>折叠导航栏</h2>
<div class="navbar navbar-expand-md bg-light navbar-light">
  <!-- 1.不折叠的菜单项-->
  <a  class="navbar-brand d-md-none d-lg-block " href="#">Bootstrap中文网</a>
  <!-- 2.在超小屏下出现的按钮                  折叠区域的激发按钮-->
  <button class="navbar-toggler" data-toggle="collapse" data-target="#content">
    <span class="navbar-toggler-icon"></span>   <!--按钮上的三条线 -->
  </button>
  <!-- 3.折叠的导航-->
  <div id="content" class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="">Bootstrap3中文文档</a>
      </li>
      <li class="nav-item mx-2">
        <a class="nav-link " href="">网站示例</a>
      </li>
    </ul>
  </div>

2.在外层div中navbar-dark/light的作用：

  这个类对本地div没有任何修饰，

修饰的是后代元素的字体颜色

3.navbar-collapse的作用

  .navbar-expend-sm .,avbar-collapse配合，

让ul在sm/ms/lg/xl下显示，在xs下，

ul的父级div执行.collapse的样式，隐藏

4..navbar-expend-sm决定了以下事情

  ①决定了sm以上显示，sm以下隐藏

  ②决定了ul在sm以上横向显示，在sm以下垂直显示

  ③决定了折叠div在sm以上显示，在sm以下隐藏

boot提供了很对类来处理媒体相关的对象（图片，影音）

<div .media>

   <img>

<div .media-body>

</div>

<button class="btn btn-warning " data-toggle="modal" data-target="#motai">打开模态框</button>
  <div id="motai" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3>填写美食</h3>
        <button data-dismiss="modal" class="close">&times;</button> 
</div>
      <div class="modal-body">
        <input class="form-control" type="text"/>  </div>
      <div class="modal-footer">
        <button class="btn btn-success" data-dismiss="modal">ok</button>
      </div>  </div></div> </div>

轮播图结构

div.carousel .data-ride=”carousel” #demo    相对定位

>div.carousel-inner                 w100溢出隐藏

>div.carousel-item                  display：none

>img             

给最外层div添加事件，data-ride=”carousel”

<h2>焦点轮播图</h2>
  <div class="carousel" data-ride="carousel" id="lunbotu">
  <!-- 轮播图片-->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="w-100" src="../img/banner3.png" alt=""/>
    </div>
    <div class="carousel-item">
      <img class="w-100" src="../img/banner2.png" alt=""/>
    </div>
  </div>
  <!-- 左右箭头-->
  <a href="#lunbotu" class="carousel-control-prev bg-dark " data-slide="prev" >
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a href="#lunbotu" class="carousel-control-next bg-danger" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
  <!-- 轮播指示器-->
  <ul class="carousel-indicators">
    <li data-slide-to="0" data-target="#lunbotu" class="active"></li>
    <li data-slide-to="1" data-target="#lunbotu"></li>
  </ul>
  </div>
/*重写箭头样式*/
.carousel-control-prev,.carousel-control-next {
  width: 4%;height: 20%;
  background: #aaa;
  border-radius: 0.25rem;
  top:40%;
}
 /*重写指示器样式*/
  .carousel-indicators li{
  width: 1rem; height: 1rem;;
  background: #fff;
  border-radius: 50%; mragin:0 5px;
}
.carousel-indicators li:hover{
  cursor:pointer ;
}
.carousel-indicators .active {
  background-color: #0AA1ED;
}

左右箭头

    <a href="# demo" class="carousel-control-prev ">

      <span class="carousel-control-prev-icon"></span>

    </a>

    <a href="#demo" class="carousel-control-next ">

      <span class="carousel-control-next-icon"></span>

</a>

重写箭头样式

.carousel-control-prev,.carousel-control-next {

      width: 4%;

      height: 20%;

      background: #aaa;

      border-radius: 0.25rem;

      top:40%;

}

a标签要添加自定义属性data-slide=”prev/next”  

事件目标是最外层div#lunbotu    href=”#lunbotu”

指示器

ul.carousel-indicators      决定定位，横向弹性

>li             宽高，背景色，外边距，需要重写li样式

        如果让li有被选中的样式，需重写.active样式

/*重写指示器样式*/

    .carousel-indicators li{

      width: 1rem;

      height: 1rem;;

      background: #fff;

      border-radius: 50%;

      mragin:0 5px;

}

.carousel-indicators .active {

      background-color: #0AA1ED;

    }

点击li激活事件   data-slide-to=”图片下标”  下标从0开始

事件改变的目标   .data-target=”#demo”    整个轮播图最外层的div#id

  覆盖在父窗体上的一个子窗体             目的：用于与用户做一些互动

div #motai .modal

>.modal-dialog

>div.modal-content
>div.modal-header+div.modal.body+div.modal-footer

关闭事件：  button.close data-dismis=”modal”

1.徽章

2.巨幕

3.分页

<h2>分页</h2>
 <ul class="pagination">
  <li class="page-item mr-1 disabled"><a class="page-link mx-1" href="">上一页</a></li>
  <li class="page-item mx-1 active"><a class="page-link  " href="">1</a></li>
  <li class="page-item mx-1"><a class="page-link " href="">2</a></li>
  <li class="page-item mx-1"><a class="page-link " href="">3</a></li>
  <li class="page-item ml-1"><a class="page-link " href="">下一页</a></li>
 </ul>

4.面包屑导航

<h2>面包屑导航</h2>
<ul class="breadcrumb">
  <li class="breadcrumb-item"><a href="">首页</a></li>
  <li class="breadcrumb-item"><a href="">手机</a></li>
  <li class="breadcrumb-item"><a href="">华为</a></li>
  <li class="breadcrumb-item"><a href="">P30</a></li>
</ul>
/*修改 面包屑的样式   > */
    .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
}

5.进度条

<h2>进度条</h2>
<div class="progress"> <!-- 进度条的槽-->
  <div class="progress-bar w-50 bg-danger"> <!-- 进度条-->
  </div>
</div>

在子div中加类  .progress-bar-striped

在子div中加类  .progress-bar-animated

 bootstrap最重要：响应式 + 栅格布局 + scss/sass

语法不够强大，没有变量，没有合理的样式复用机制，导致难以维护。

我们要使用动态样式语言，赋予css新的特性，提高样式羽凡的可维护性。

常用的动态样式语言：

 1.SCSS/SASS  (scss兼容sass，scss更接近 )

scss是一款强化css的辅助工具，它和css语法很像。

它在css的语法基础上，添加了变量，嵌套，混合，导入，函数等高级功能，这些拓展命令使css更加强大与优雅

浏览器不能直接解析scss文件，需要在项目中吧scss转义成css文件，让浏览器解析。

scss可以让css开发更高效

scss在服务器端使用，必须安装nodejs，而且版本在v8.11以上

  在线安装：npm install –g node-sass

  离线安装：找到nodejs安装路径，将安装包文件放到nodejs文件夹下

验证安装成功：cmd > node-sass –v  验证版本

1.单文件转换

  创建scss文件，  cmd> node-sass scss/*.scss  css/*.css

scss/*.scss : 要转换的scss的文件路径和文件名

css/*.css ：转换后的css的文件路径和文件名

2.多文件转换

  cmd> node-sass scss(文件夹名称) –o css(文件夹名称)

3.单文件监听

  cmd> node-sass –w scss/*.scss  css/*.css

 开启，系统会盯着*.scss，当*.scss内容发生改变保存的时候，自动转换位*.css

4.多文件监听

  cmd> node-sass –w scss -o css

使用$声明变量，变量名包含 - , _ ;

命名规则基于与css选择器相同，尽量做到见名知意

总结：

1.变量声明在{ }外，整个scss文件都可以使用；

变量声明在{ }之内，只有当前{ }内可以使用。

2.!default规则，如果此变量在之前已经声明辅赋值了，俺么使用之前的值，

               如果之前没有声明赋值，使用现在的值

*.html

<div#content>

<div.top>

<p>

<h1>

</div>

<div.buttom>

 <buttom>

*.scss

#content{
div.top{ color:red;
 p{color:yellow;}
 h1{ color:blue;  } }
  div.bottom{ background-color:#0ff; }
}

*.css

#content div.top {
  color: red; }
#content div.top p {
  color: yellow; }
#content div.top h1 {
  color: blue; }
#content div.bottom {
  background-color: #00ff22;
}

伪类的嵌套

  需要在伪类选择器之前添加&，如果不添加，会生成一个空格，导致伪类失败

a{color:#000;
  &:hover{color:#ff0;}
}

属性嵌套
    div{
  border:{style:solid;width:2rem;color:#f00;}
}

群组选择器嵌套
p,h1,div{color: red}

在scss语法中，如果一个scss文件以下划线(_)开头，那么这个scss文件就是一个局部scss文件

scss文件转换成css文件的时候，不会把局部scss文件进行转换，只转换不以下划线开头的文件（局部scss文件）

导入语法：  @import “ name”;        导入的时候，不写下划线，不写后缀，

局部文件被导入后，局部文件中的样式，会在全局文件转换的css中生成

同时，局部文件中声明的变量，可以在全局文件中使用

把多个选择器都会使用的样式封装进一个混合器，需要使用这些样式选择器，可以调用这个混合器，实现代码重用

关键字  声明混合器  @mixin 混合器名称($参数1，$参数2){ 样式}

        调用混合器  @include 混合器名称($参数1，$参数2);

混合器的使用场合： 

CSS  Hack

  一个选择器可以使用另外一个选择器的所有样式

关键字  @extend   转换之后，继承的表现方式是群组选择器

.my1{width: 100px;height: 100px}
.my2{
  background: #f00;
  @extend .my1;
}

  加减乘除余 + - / %      如果必要，会在不同单位之间转换，（前提是scss能转）

1. 加法

2. 减法

3. 除法

  1. 运算式的两边有变量或者函数的返回值，是除法：width:$width/2;
2. 运算式被（）包裹的时候，是除法   height:(500px/2); 
3. 运算式是其它算术运算式的一部分的时候，是除法  margin-left:5px+8px/2px;

4. 字符串的插值操作

  使用#{} 在字符串中做插值    content:"a #{50+30}c"

5. 颜色运算

#rrggbb和 rgb(r,g,b)  都是分段计算r+r,g+g,b+b    #112233+#445566=#557799
rgba( r,g,b,alpha)相加，要求透明度a的值相同，才能计算

1.scss预定义了很多函数，有有些函数直接可以在css中使用

2.数学函数

3.字符串函数

4.自定义函数

@if(){}@else if(){}@else{}

注意：bool值的小括号可以去掉,加个空格