bootstrp_组件

3.组件

网页中有一些复杂的特殊效果，之前必须使用 js，dom，jq boot为我们封装好了很多常见的组件，我门可以之间使用 方便快捷，但是如果需要个性化处理，比较繁琐 boot中，大量使用元素的自定义属性来调用方法

1.下拉菜单

基本结构 dropdown">   dropdown-toggle"    data-toggle="dropdown">   dropdown-menu">	下拉菜单      下拉菜单       青椒     泡椒     红椒     甜椒     灯笼椒
div .dropdown  父级，相对定位 button .dropdown-toggle  画下拉三角 ul .dropdown-menu  隐藏display:none data-toggle=”dropdown” 自定义属性的作用 1.当button被点击时，激活事件 2.自定义属性的值绝对激活哪一个事件

2.按钮组

btn-group btn-group-lg">   冬瓜   南瓜	h2>按钮组   冬瓜   南瓜   西瓜   北瓜   丝瓜
外层div中class有如下值 .btn-group横向按钮组 btn-group-vertical纵向按钮组 可以添加btn-group-sm/lg调整按钮大小

3.信息提示框

alert-dismissible">   close" data-dismiss="alert" > ×               提示信息

<h2>信息提示框h2>   <div class="alert alert-warning alert-dismissible">     请检查钱包里面是否有钱<span class="close" data-dismiss="alert"><b>×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的方式运行

4.导航

①水平导航   基本结构: ul.nav>li.nav-item>a.nav-linlk l class="nav justify-content-around nav-justified"> nav-item"> nav-link btn btn-danger">酸菜     ul.nav定义了弹性布局，主轴x 之前学的所有的弹性布局的样式都可以使用 .nav-justify>.nav-item同时设置，让元素等宽显示 a.nav-link块级元素，设置了hover，focus等样式

②选项卡导航 基本结构 上层是选项卡 ul.nav.nav-tabs>li.nav-item>a.nav-link nav-tabs”> ul.nav变成选项卡添加类nav-tab   .nav-tabs设置自己孩子nav.item nav.link a标签添加自定义属性data-toggle=”tab” 以tab的方式激活事件 绑定目标元素a的href属性指向下面的内容的id值 下层内容 div.tab-content>div.tab-pane .tab-content>   table-pane> div.tab-content>div.tab-pane 配合使用 让div.tab-pane都是display:none\ 然后div.tab-pane要写id，让a标签绑定 选项卡导航   麻将云集   万子   条子   筒子   成都麻将，广东麻将，香港麻将，重庆麻将   一万,二万，三万，四万，五万，六万，七万，八万，九万   一条，二条，三条，四条，五条，六条，七条，八条，九条   一筒，二筒，三筒，四筒，五筒，六筒，七筒，八筒，九筒

③胶囊导航 导航部分 ul.nav.nav-pills>li.nav-item>a.nav-link data-toggle=”pill”        pill” href=”#内容”> 内容部分 div.tab-content>div.tab-pane    与选项卡一致修改参数nav-tab位tab-pills 胶囊导航   电脑   手机   mac 电脑联想电脑,华硕电脑,戴尔电脑,惠普电脑   iPhone，huawei，mi，Honor

***事件激活三部曲

一个事件激活，关注几件事  1.激活这个事件的元素         （data-toggle="collapse） 2.这个事件以什么方式激活     data-toggle"=" collapse " 3.这个事件激活后，改变的目标元素是谁  （data-target="#motai"）

5.导航栏

div.navbar.navbar-expand-sl/lg/md/sm>ul.navbar-nav>li.nav-item>a.nav-link   .anvbar.navbar-expend-sl/lg/md/sm> navbar-nav >	导航栏       小了白了兔了白     小了白了兔了白     爱了吃了萝了卜     爱了吃了萝了卜
.navbar-expend-sl/lg/md/sm:作用，作为子元素ul.navbar-nav的选择器条件，让ul.navbar-nav在主轴方向从y轴变成x轴 div.navbar-expend-*配合ul.navbar-nav可以让导航栏在不同屏幕下横向或纵向显示 响应式导航栏:  lg: 大屏超大屏，li横向显示，中小屏纵向显示

6.折叠效果

collapse" data-target="#demo"> 折叠 collapse" id="demo">内容 折叠，需要折叠内容添加 .collapsee （display：none） 折叠事件data-toggle=”collapse” 折叠目标：  如果是a标签，使用href=”#” ； 如果是button使用data-target=”#”

折叠效果 显示折叠 show   Lorem ipsum dolor sit amet,

7.卡片

card">     card-header">     card-body">     card-footer">

8.手风琴(卡片+折叠)

#father>   .card>    .card-header>      .card-link data-toggle=”colapse” href=#d1> 内容 data-parent=”#father” #d1 .collapse>   .card-body>内容2        1. .collapse不能和.card-body在同一个标签上，   不然会发生折叠/显示的卡顿   解决方案div.collapse>div.card-body 2.几个折叠部分，可以同时打开，而不能开启一个，其它的都关闭   解决方案，在最外层div（card外部）上写id="parent"   在所有div.collapse中添加事件的绑定data-parent="#parent"   这样就可以保证在最外层div中，只有一个折叠区域可以打开了

手风琴（卡片+折叠）         早餐           面条，包子，稀饭                 中餐               青椒肉丝，鱼香肉丝，土豆肉丝

9.折叠导航栏

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">     <a  class="navbar-brand d-md-none d-lg-block " href="#">Bootstrap中文网a>     <button class="navbar-toggler" data-toggle="collapse" data-target="#content">     <span class="navbar-toggler-icon">span>     button>     <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以下隐藏

10.媒体对象

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

打开模态框                     填写美食         ×                               ok

11.焦点轮播图

轮播图结构 div.carousel .data-ride=”carousel” #demo    相对定位 >div.carousel-inner                 w100溢出隐藏 >div.carousel-item                  display：none >img              给最外层div添加事件，data-ride=”carousel”	焦点轮播图                                                                    /*重写箭头样式*/ .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; }
左右箭头     carousel-control-prev ">       carousel-control-prev-icon">         carousel-control-next ">       carousel-control-next-icon"> 重写箭头样式 .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

12.模态框

覆盖在父窗体上的一个子窗体             目的：用于与用户做一些互动 div #motai .modal >.modal-dialog >div.modal-content >div.modal-header+div.modal.body+div.modal-footer 关闭事件：  button.close data-dismis=”modal”

13.其它组件

1.徽章 badge  基本类   跟小按钮十分相似 颜色badge-danger/success/….. 徽章的样式  badge-pill 胶囊 2.巨幕   巨大的内边距，有背景颜色和圆角   div.jumbotron” 3.分页  ul.pagination>li.page-item>a.page-link li的修饰类   .active激活   .disabled禁用 分页   上一页   1   2   3   下一页 4.面包屑导航  常用于有路径关系的导航 ul.breadcrumb>li.breadcrumb-item 中间的连接符号需要自己重写样式 面包屑导航   首页   手机   华为   P30 /*修改 面包屑的样式   > */ .breadcrumb-item + .breadcrumb-item::before {   content: ">"; } 5.进度条 ①普通进度条 div.progress>div.progress-bar.w-50.bg-dark 父div是进度条的槽， 子div进度条，子div的宽度是进度条的进度 进度条     ②条纹进度条 在子div中加类  .progress-bar-striped ③带动画条纹进度条 在子div中加类  .progress-bar-animated

4.js插件

5. sass 定制

BOOT定制：scss/sass

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

CSS有很多缺点

语法不够强大，没有变量，没有合理的样式复用机制，导致难以维护。   我们要使用动态样式语言，赋予css新的特性，提高样式羽凡的可维护性。 常用的动态样式语言：  1.SCSS/SASS  (scss兼容sass，scss更接近 )

1.SCSS详解

①什么是scss

scss是一款强化css的辅助工具，它和css语法很像。 它在css的语法基础上，添加了变量，嵌套，混合，导入，函数等高级功能，这些拓展命令使css更加强大与优雅 浏览器不能直接解析scss文件，需要在项目中吧scss转义成css文件，让浏览器解析。 scss可以让css开发更高效

②scss的安装与使用

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

在线安装：npm install –g node-sass   离线安装：找到nodejs安装路径，将安装包文件放到nodejs文件夹下 验证安装成功：cmd > node-sass –v  验证版本

③SCSS文件转换从CSS文件

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

④SCSS基础语法

1.变量

使用$声明变量，变量名包含 - , _ ; 命名规则基于与css选择器相同，尽量做到见名知意 总结： 1.变量声明在{ }外，整个scss文件都可以使用； 变量声明在{ }之内，只有当前{ }内可以使用。 2.!default规则，如果此变量在之前已经声明辅赋值了，俺么使用之前的值，                如果之前没有声明赋值，使用现在的值

2.嵌套

*.html	*.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}

3.导入(@import)

在scss语法中，如果一个scss文件以下划线(_)开头，那么这个scss文件就是一个局部scss文件 scss文件转换成css文件的时候，不会把局部scss文件进行转换，只转换不以下划线开头的文件（局部scss文件）   导入语法：  @import “ name”;        导入的时候，不写下划线，不写后缀， 局部文件被导入后，局部文件中的样式，会在全局文件转换的css中生成 同时，局部文件中声明的变量，可以在全局文件中使用

4.混合器 (@mixin-@include)

把多个选择器都会使用的样式封装进一个混合器，需要使用这些样式选择器，可以调用这个混合器，实现代码重用   关键字  声明混合器  @mixin 混合器名称($参数1，$参数2){ 样式}         调用混合器  @include 混合器名称($参数1，$参数2); 混合器的使用场合：  CSS  Hack

5.继承( @extend)

一个选择器可以使用另外一个选择器的所有样式 关键字  @extend   转换之后，继承的表现方式是群组选择器 .my1{width: 100px;height: 100px} .my2{   background: #f00;   @extend .my1; }

⑤运算

加减乘除余 + - / %      如果必要，会在不同单位之间转换，（前提是scss能转） 1. 加法 + 除了做加法，还做字符串拼接， 字符串拼接的时候，如果有引号的字符串去拼接无引号的，结果有引号；                   如果无引号的字符串去拼接有引号的，结果是无引号的 2. 减法 - 由于变量声明的时候可以使用（–） ， 系统分不清楚（–）是不是变量名称，所以我们写减号的时候要在减号（-）前后加上空格 3. 除法   在scss中（/）的作用是分割符 以下情况判断为除法：   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中使用   rgba(r,g,b,alpha)   hsl(h,s,l)      h:hue色调 取值0~360，3个色段，120一个 s：saturation 饱和度 0.0%~100.0% l：lightness 亮度 0.0%~100.0% 2.数学函数 round($val) 四舍五入 ceil($val)    向上取整 floor($val)   向下取整 min($v1,$v2.....) max($v1,$v2.....) random  随机数 3.字符串函数 unquote($str) 去掉$str的双引号 quote($str) 给$str添加双引号 to_upper_case($str); $str变大写 to_lower_case($str); $str变小写 4.自定义函数 @function get-width($n,$m){     @return $n - $m; }

⑦指令

@if(){}@else if(){}@else{} 注意：bool值的小括号可以去掉,加个空格