Bootstrap class快捷笔记

Bootstrap快捷笔记

• 中文文档

列表

媒体类型

• all 所有设备
• print 打印机设备
• screen 彩色的屏幕
• speech 视听设备

媒体特性

• width 宽度
  - min-width 最小宽度，宽度只能比这个大
  - max-width 最大宽度，宽度只能比这个小
• height 高度
  - min-height 最小高度，高度只能比这个大
  - max-height 最大高度，高度只能比这个小
• orientation 方向
  - landscape 横屏(宽度大于高度)
  - portrait 竖屏(高度大于宽度)
• aspect-ratio 宽度比
  - -webkit-device-pixel-ratio 像素比(webkit内核的私有属性)
  返回顶部

逻辑运算符

• and 合并多个媒体查询(并且的意思)
• , 匹配某个媒体查询(或者的意思)
• not 对媒体查询结果取反
• only 仅在媒体查询匹配成功后应用样式(防范老旧版本浏览器)

@规则

• @chartset 定义编码
• @import 引入css文件（css模块化)
• @font-face 自定义字体
• @keyframes antimation的关键帧
• @media 媒体查询 -->
  返回顶部

容器

• container 表示居中，适配不同的断的 max-width的 尺寸
• container-fluid, 全屏，适配屏幕的 width: 100% 尺寸
  返回顶部

行

• row 表示一行,一行能设置12列
  返回顶部

列

• col-xl-* 超大屏 固定宽度为1140px 当屏幕尺寸小于1200px，一行只能设置一列
• col-lg-* 大屏 固定宽度为960px 当屏幕尺寸小于992px，一行只能设置一列
• col-md-* 中屏 固定宽度为720px 当屏幕尺寸小于768px，一行只能设置一列
• col-sm-* 小屏 固定宽度为540px 当屏幕尺寸小于576px，一行只能设置一列
• col-* 超小屏 固定宽度为auto 当屏幕尺寸小于1200px，一行永远设置12列
• col 宽度相等
  返回顶部

对齐

• 交叉轴的对齐
• align-items-strat 顶对齐
• align-items-center 中间对齐
• align-items-end 底对齐
• align-items-baseline 基线对齐
• align-items-stretch 如果子元素没有设置高或者设置了auto，子元素将占据整个容器的高度
• align-items-md-start 交叉轴响应式的对齐
  
  
• 列的单独对齐方式
• align-self-start 顶对齐
• align-self-center 中间对齐
• algin-self-end 底对齐
  
  
• 主轴上的对齐
• justify-content-around 分散居中对齐
• justify-content-between 两端对齐
• justify-content-center 居中对齐
• justify-content-end 右对齐
• justify-content-strat 左对齐
  
  
• 元素自身的对齐方式
• align-self-center 中间对齐
• align-self-end 底对齐
• align-self-start 顶对齐
• align-self-baseline 基线对齐
• align-self-stretch 如果子元素没有设置高或者设置了auto，子元素将占据整个容器的高度
  
  
• 多行对齐
• align-content-start 顶对齐
• align-content-end 底对齐
• align-content-center 中间对齐
• align-content-around 上下分散对齐
• align-content-between 上下两端对齐
• align-content-stretch 如果子元素没有设置高或者设置了auto，子元素将占据整个容器的高度
• align-content-start-md 响应式中屏对齐
  
  
• 文本对齐
• text-left 左对齐
• text-center 居中对齐
• text-right 右对齐
• text-justify 分散对齐
  返回顶部

排序

• order-*
• order-xl-5 响应式排序
• 注意3.x的版本使用的是col-{breakpoint}-push-* col-{breakpoint}-pull-*
  返回顶部

偏移

• offset-{breakpoint}-* 列偏移

字体样式

• 添加h标签字体样式

• h1

• h2

• h3

• h4

• h5
  
  

• h标签的副标签

<h3>这是主标题
    <small>这是副标题</small>
</h3>

• 更大的标题

• display-1

• display-2

• display-3

• display-4
  
  

• 引言

• lead 突出显示
  返回顶部

• 内联文本
• mark 标记重点文本
• small 文本变小
• del,标记删除文本 ins,新插入进去的文本

    <p><del>这是一段被删除的文本</del><ins>，这是一段新插入进去的文本</ins></p>

• em 倾斜文本

  <p><em>这里的文本会倾斜</em></p>

• strong 加粗文本

<p><strong>这里的文本会加粗</strong></p>

• 缩写
• 相当于提示文本
• initialism 字体小一点

    <p><abbr title="attrbitue">attr</abbr></p>
    <p><abbr title="Hypper Text Markup Langauge" class="initialism">HTML</abbr></p>     

返回顶部

• 无特效列表

• list-unstyled 无特效列表

• list-inline 让里面的li变为inline-block

• list-inline-item 需要给li加上才行 3.x版本不需要在li上面加list-inlien-item
  
  

• text-truncate 单行文本溢出打点省略 3.x版本使用的是text-overflow

- 代码 - 提示按钮, kbd标签 ```html

想要保存的话按ctrl+s保存

```

表格

• table-{linght} 整个表格颜色，颜色库在bootstrap查
• thead-{dark} 给表格头设置颜色
• table-striped 隔行换色
• table-bordered 表格边框
• table-borderless 去除边框
• table-hover 高亮部分
• table-sm 更小的表格
• table-responsive-{md} 表格自适应
  返回顶部

图文区

• figure父容器
• figure-caption 文本描述
• figure-img 图片需要加的class

<div class="container">
        <div class="row">
            <figure class="figure">
                <img class="img-fluid rounded figure-img" src="1.jpg" alt="">
                <figcaption class="figure-caption">这是谁</figcaption>
            </figure>
        </div>
    </div>

返回顶部

图片

• img-fluid 图片根据视频断电自适应
• img-thumbnail 缩略图
• rounded 圆角
• 适应图片分辨率的问题
• <picture> 父容器
• <source> 子容器

    <div class="row">
        <picture>
            <source media="(min-width:1200px)" srcset="./1.jpg">
            <source media="(min-width:992px)" srcset="./2.jpg">
            <source media="(min-width:768px)" srcset="./3.jpg">
            <source media="(min-width:576px)" srcset="./4.jpg">
            <img src="./5.jpg" alt="">
        </picture>
    </div>

返回顶部

浮动

• float-left 左浮动
• float-right 右浮动
• float-none 不浮动
• float-md-left 响应式的浮动
• clearfix 清除浮动
  返回顶部

边框

• border 边框
• border-top 上边框
• border-left 左边框
• border-right 右边框
• border-bottom 下边框
• border-0 删除边框
• border-primary 边框颜色
• rounded 边框圆角
  返回顶部

显示

• 把元素显示成各种类型,3.x版本只有三种,block,inline,inline-block,类名叫visiable-*-block
• d-inline 行盒
• d-block 块盒
• d-table table盒
• d-inline-block 行块盒
• d-flex 弹性盒
• d-print-block 在打印的时候显示 3.x版本打印的类名为visiable-print-block
  返回顶部

隐藏

• 实例
• 在各种尺寸下显示为一个元素,只在某一个尺寸下显示,在其他的尺寸都要隐藏
• 1.隐藏是分为两个部分
• 2.比它大的尺寸隐藏
• 3.比它小的尺寸隐藏
• 3.x的版本隐藏的类名为hidden-*

<div class="container">
        <div class="row">
            <div class="col bg-primary text-white d-xl-block d-none">只在超大屏幕下显示</div>
            <div class="col bg-dark text-white d-none d-lg-block d-xl-none">只在大屏幕下显示</div>
            <div class="col bg-dark text-white d-none d-md-block d-lg-none">只在中等屏幕下显示</div>
            <div class="col bg-dark text-white d-none d-sm-block d-md-none">只在小屏幕下显示</div>
            <div class="col bg-dark text-white d-sm-none">只在超小屏幕下显示</div>
        </div>
    </div>

返回顶部

<div class="container mt-5">
        <div class="row">
            <div class="col bg-primary text-white d-xl-none">只在超大屏幕以外显示</div>
            <div class="col bg-dark text-white d-lg-none d-xl-block">只在大屏幕以外显示</div>
            <div class="col bg-dark text-white d-md-none d-lg-block">只在中等屏幕以外显示</div>
            <div class="col bg-dark text-white d-sm-none d-md-block">只在小屏幕以外显示</div>
            <div class="col bg-dark text-white d-sm-block d-none">只在超小屏幕以外显示</div>
        </div>
    </div>

嵌入

<div class="container">
        <div class="row">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe  src='https://player.youku.com/embed/XNTIwMTQxMDMyOA==' allowfullscreen></iframe>
            </div>
        </div>
    </div>

返回顶部

弹性盒子

• d-flex 变成弹性盒子
• d-lg-inline-flex 变成响应式弹性盒子
• flex-fill 填满
• flex-grow-* 扩展比例，数字为0表示不扩展，数字为1表示扩展，只有这两个数字
• flex-shrink-* 收缩比例，数字为0表示不扩展，数字为1表示收缩，只有这两个数字
• flex-warp 换行
• flex-nowarp 不换行
• flex-warp-reverse 反向换行
• flex-warp-md 中等屏响应式换行
  返回顶部

子元素排序方式

• flex-row 正序水平排列
• flex-row-reverse 倒序水平排序
• flex-column 正序垂直排序
• flex-column-reverse 倒序垂直排序
• flex-sm-column-reverse 响应式小屏幕倒序垂直排序
  返回顶部

自动的间距

• mr-auto 右间距
• ml-auto 左间距
• mb-auto 底间距
• mt-auto 上间距
• 它们无响应
  返回顶部

定位

• position-static 默认值，没有定位
• position-relative 相对定位
• position-absolute 绝对定位
• position-fixed 固定定位
• fixed-top 固定在顶部
• fixed-bottom 固定在底部
• sticky-top 粘性定位
  返回顶部

阴影

• shadow-sm 小阴影
• shadow 正常阴影
• shadow-lg 大一点阴影
  返回顶部

关闭图标

<div class="row mt-5">
            <button type="button" class="close"></button>
            <span>&times;</span>
        </div>

返回顶部

图像替换

 <div class="row mt-5">
            <h1 class="text-hide"
                style="background-image: url('/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap
            </h1>
        </div>

返回顶部

内容溢出

• overflow-auto 溢出显示滚动条
• overflow-hidden 溢出隐藏

间距

• m margin值
• p pidding值
• mx-auto 水平居中
• t - 这个Class属性会设定 margin-top 或 padding-top
• b - 这个Class属性会设定 margin-bottom 或 padding-bottom
• l - 这个Class属性会设定 margin-left 或 padding-left
• r - 这个Class属性会设定 margin-right 或 padding-right
• x - 这个Class属性会设定 *-left 和 *-right两个值。
• y - 这个Class属性会设定 *-top 和 *-bottom两个值
• 0 - 这个Class属性会设定 margin 或 padding 的样式值为 0
• 1 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * .25规格呈现
• 2 - (默认时) 这个Class属性会设定 margin 或 padding 以 $spacer * .5规格呈现
• 3 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer规格呈现
• 4 - (默认时) 这个Class属性会设定margin 或 padding 以 $spacer * 1.5规格呈现
• 5 - (默认时)这个Class属性会设定 margin 或 padding 以 $spacer * 3规格呈现
• auto - 这个Class属性会设定 margin 值 auto（按浏览器默认值自由展现）
  返回顶部

文本溢出打点

 <div class="row">
            <div class="text-nowrap text-truncate" style="width: 8rem;">
                This text should overflow the parent.
            </div>
        </div>

返回顶部

警告框

• alert 警告框
• alert-success 警告框颜色
• 可以关闭的警告框
• 警告框事件
• dom.alfer(‘close’) 执行
• onclose.bs.alert close方法被调用了执行
• oncloseed.bs.alert 警告框被关闭了

<!-- fade show 是动画 -->
<!-- data-dismiss 是js -->
&times; 是x
 <div class="alert alert-warning alert-dismissible fade show">
            这是一个可以关闭的警告框,但是需要引入jquery和bootstrap.js
            <button class="close" data-dismiss="alert">&times;</button>
  </div>

返回顶部

徽章

• badge
• badge-primary 徽章颜色

面包屑导航

• breadcrumb 父元素
• breadcrumb-item 子元素

 <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="#">首页</a></li>
                    <li class="breadcrumb-item"><a href="#">关于我们</a></li>
                    <li class="breadcrumb-item  active">联系我们</li>
                </ol>
            </nav>

返回顶部

按钮

• btn
• btn-primary 按钮颜色
• btn-outline-primary 带边框的按钮
• btn-lg 大按钮
• btn-sm 小按钮
• btn-block 块按钮
• active 启用状态
• disabled 停用状态
• btn-group 按钮组
• btn-toolbar input框组合
• input-group input组
• btn-group-lg 大组合按钮
• btn-group-sm 小组合按钮
• dropdown-toggle 小三角
• btn-group-vertical 垂直排列

<!-- 不同类型的按钮 -->
             <a class="btn btn-primary" href="#">a标签按钮</a>
            <button class="btn btn-secondary" type="submit">button标签按钮</button>
            <input type="button" value="input标签" class="but but-success" >

<!-- 点击切换状态 -->
 <button class="btn btn-primary " data-toggle="button">点击切换状态</button>

<!-- 切换按钮的active状态 -->
 <button id="btn" class="btn btn-primary">点击切换状态</button>
 <script>
    $('#btn').button('toggle')
 </script>

返回顶部

卡片

• card 卡片盒
• card-body 卡片主体
• card-header 卡片页眉
• card-footer 卡片页脚
• card-title 卡片标题
• card-text 卡片文本
• card-subtitle 卡片副标题
• card-link 卡片链接
• card-img 卡片图片
• card-img-top 在顶部的卡片
• card-img-bottom 在底部的卡片
• card-img-overlay 文字在卡片上面
• card-group 卡片组,需要放在card外面
• card-deck 卡片阵列
• card-columns 多列卡片浮动排版
  返回顶部

轮播图

• carousel 引入轮播图组件
• slide 为轮播图添加动画过渡效果
• carousel-inner 轮播图容器
• carousel-item 轮播图子列(可加active)
• data-ride=“carousel” 需要插入在carousel的元素里
• data-interval=“2000” 轮播图间隔时间循环
• data-keyboard=“true” 对键盘事件做出反应,需要获得焦点
• data-pause=“hover” 鼠标放入轮播图暂停轮播
• data-wrap=“false” 只轮一次
• 需要添加id关联全局轮播图
• 添加箭头

<!-- 左箭头 -->
 <a href="#indicators" class="carousel-control-prev" data-slide='prev'>
        <span class="carousel-control-prev-icon"></span>
</a>
<!-- 右箭头 -->
<a href="#indicators" class="carousel-control-next" data-slide='next'>
     <span class="carousel-control-next-icon"></span>
</a>

• 添加指示器

 <ol class="carousel-indicators">
    <li class="active" data-target="#indicators" data-slide-to="0"></li>
    <li data-target="#indicators" data-slide-to="1"></li>
    <li data-target="#indicators" data-slide-to="2"></li>
</ol>

• 添加文字

<div class="carousel-item active">
    <img src="1.jpg" alt="" class="img-fluid">
    <div class="carousel-caption">
        <h5>这是一张图</h5>
        <p>这是文字</p>
    </div>
</div>

• 方法

//启动轮播图
 $('#methods').carousel({
     interval: 2000
});
//左到右循环播放
$('#methods').carousel('cycle');
//停止轮播
 $('#methods').carousel('pause');
 //上一张轮播图
$('#methods').carousel('prev')
//下一张轮播图
  $('#methods').carousel('next')
//指示器添加事件
  $('.indicators li').each(function(index,ele){
         $(ele).on('click',function(){
        $('#methods').carousel(index)
    })
})

• 轮播事件

 $('#methods').on('slide.bs.carousel',function(e){
    console.log(e.direction) //轮播滚动的方向
    console.log(e.relatedTarget) //下一个dom
    console.log(e.from) //当前dom位置索引
    console.log(e.to)   //滑动到下一个dom的位置索引
})

返回顶部

折叠面板

<p>
    <a href="#jiuyi" class="btn btn-primary" data-toggle="collapse">九依</a>
    <button data-toggle="collapse" data-target="#jiuyi" class="btn btn-primary"> 九依</button>
</p>
                <!-- 折叠块 -->
<div class="collapse show" id="jiuyi">
    <div class="card card-body">
        <p class="card-text">???????????????????????????????????????????</p>
    </div>
</div>

• collapse 折叠组件引入
• accordion 无缝组合(配合手风琴)
• show 动画
• card 卡片
• data-toggle=“collapse” js事件
• data-parent=“#accordion” 绑定折叠组 (配合手风琴)
• 属性

  $('#myCollapse').collapse('toggle') //执行淡入,隐藏
   $('#myCollapse').collapse('show')//显示
   $('#myCollapse').collapse('hide')//隐藏

• 事件

            $('#myCollapse').on('show.bs.collapse',function(e){
                console.log('我显示了')
            })
            $('#myCollapse').on('shown.bs.collapse',function(e){
                console.log('折叠完成')
            })
            $('#myCollapse').on('hide.bs.collapse',function(e){
                console.log('开始隐藏')
            })
            $('#myCollapse').on('hidden.bs.collapse',function(e){
                console.log('全部隐藏')
            })

返回顶部

下拉菜单

<div class="dropdown">
   <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">button标签下拉</button>
   <div class="dropdown-menu">
       <a class="dropdown-item" href="">北京</a>
       <a class="dropdown-item" href="">上海</a>
       <a class="dropdown-item" href="">广州</a>
   </div>
</div>

• dropdown 下拉菜单
• dropdown-toggle 按钮样式
• data-toggle=“dropdown” js事件
• dropup 上拉菜单
• dropright 右拉菜单
• dropleft 左拉菜单
• dropdown-menu 菜单容器
• dropdown-item 菜单子项
• dropdown-divider 分割线
• dropdown-header 下拉菜单头部
• dropdown-item-text 不能点击的项
• data-offset=“10,20” 偏移事件
• dropdown-menu-right 右对齐
  返回顶部

表单

• form-group 表单组

• form-control input表单重置样式,button

• form-text 配合input:text使用 字体样式

• text-muted 配合input:text使用 字体样式

• form-control-file 提交文件按钮样式

• form-control-range 滑块样式

• form-check-inline 让单选/复选框一行展示

• form-check 复/单选框组

• form-check-input 复/单选框样式

• form-check-lable 复选框样式

• form-control-lg / col-form-label-lg 大尺寸的表单

• form-control-sm / col-form-label-sm 小尺寸的表单

• form-inline 变为一行

• readonly 只读属性

• form-control-plaintext 只读文本样式

• col-form-label 文本垂直对齐

• 验证表单

• valid-feedback 验证通过

• invalid-feedback 验证失败

• required 提交验证

• novalidate 加了之后没有值的input可以通过

 (function(){
 var  forms = document.querySelectorAll('.needs-validation');
    forms.forEach(function(form,index){
        form.addEventListener('submit',function(ev){
            if(form.checkValidity()===false){
            ev.preventDefault(); //阻止默认事件
            ev.stopPropagation();//防止冒泡
    }
            form.classList.add('was-validated')//添加验证
    })
    })
}())

• 自定义表单
• custom-control 自定义表单容器
• custom-checkbox 自定义复选框样式
• custom-control-label 自定义label样式
• custom-radio 自定义单选框样式
• custom-control-inline 在一行中显示
• custom-select 下拉菜单样式
• custom-range 滑块样式 max=“5” min="0"属性,有范围的块 step="0.5"规定步长
• custom-file 文件选取容器
• custom-file-input 文件选取样式
• custom-file-label 文件选取label样式
  返回顶部

输入框组

• input-group 输入框容器
• input-group-prepend 在前面插入
• input-group-append 在后面插入
• input-group-text 不用输入的文本样式
• 演示

                <div class="form-group input-group">
                   <div class="input-group-prepend">
                      <span class="input-group-text">上传在左边</span>
                   </div>
                  <div class="custom-file">
                   <input type="file" name="" id="file" class="custom-file-input"> 
                   <label for="file" class="custom-file-label"></label>
                  </div>
               </div>

返回顶部

超大屏幕

• jumbotron 超大屏幕容器
• jumbotron-fluid 宽度为100%的超大屏幕容器
• 中文文档示例

<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <hr class="my-4">
  <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
  </p>
</div>

返回顶部

列表组

• list-group 列表组容器
• list-group-item 列表组子项
• list-group-item-action hover效果
• 使用徽章效果

        <div class="row mt-5">
            <div class="col">
                <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        red
                        <span class="badge badge-danger badge-pill">14</span>
                    </li>
                </ul>
            </div>
        </div>

• 列表选项卡

 <div class="row mt-5">
            <div class="col-4">
                <div class="list-group" id="myList">
                    <a href="#list-home1" class="list-group-item list-group-item-action">Home</a>
                    <a href="#list-profile1" class="list-group-item list-group-item-action ">Profile</a>
                    <a href="#list-messages1" class="list-group-item list-group-item-action ">Messages</a>
                    <a href="#list-settings" class="list-group-item list-group-item-action ">Settings</a>
                </div>
            </div>
            <div class="col-8">
                <div class="tab-content">
                    <div class="tab-pane fade " id="list-home1">HomeHomeHomeHomeHomeHomeHomeHomeHomeHome</div>
                    <div class="tab-pane fade" id="list-profile1">ProfileProfileProfileProfileProfileProfileProfile
                    </div>
                    <div class="tab-pane fade" id="list-messages1">messagesmessagesmessagesmessagesmessagesmessages
                    </div>
                    <div class="tab-pane fade" id="list-settings1">
                        SettingsSettingsSettingsSettingsSettingsSettingsSettings</div>
                </div>
            </div>
        </div>
    <script>
        $('#myList a:first-child').tab('show');
        $('#myList a').on('click', function () {
            $(this).tab('show')
        })
    </script>

返回顶部

模态框

• modal 模态框组件
• modal-dialog 垂直居中
• modal-content 模态框容器
• modal-header 模态框头部
• modal-title 模态框标题
• modal-body 模态框主体
• modal-footer 模态框尾部
• id=“modal1” ID自定义
• data-dismiss=“modal” 关闭模态框

  <!-- button打开模态框 -->
  <!-- data属性 -->
  <!-- data-backdrop="false"是否显示遮罩层 -->
  <!-- data-keyboard=" false"键盘esc是否退出，需要获得焦点 -->
  <!-- data.focus 让模态框获取到焦点（没啥用） -->
  <!-- data.show 初始化模态框是否显示 -->
 <button class="btn btn-primary" data-toggle="modal" data-target="#modal1">普通模态框</button>

• 点击按钮获取value见详细笔记

        $('#modal4').on('show.bs.modal',function(ev){
            // 1. $(ev.relatedTarget) 这个值为点击的button
            // 2. .data('wahtever') 这个是获取data-开关的属性的值
            var value = $(ev.relatedTarget).data('whatever');
            $(this).find('.modal-title').text('新评论来自于' + value);
            $(this).find('.modal-body input').val(value)
        })

        $("#myBtn").on('click',function(){
            $('#modal8').modal('show')
        })
        $('#modal8').modal('show');
        setTimeout(function(){
            $('#modal8').modal('hide');
        },2000)

返回顶部

媒体对象

• media 媒体对象容器
• media-body 媒体对象主题部分
• 示例

<div class="container">
        <div class="row">
            <div class="col">
                <div class="media">
                    <a href=""><img width="150" src="1.jpg" alt=""></a>
                    <div class="media-body ml-2">
                        <h5>这是标题</h5>
                        这是一段文本这是一段文本这是一段文本这是一段文本
                    </div>
                </div>
            </div>
        </div>
    </div>

导航

• nav 导航容器
• nav-link 导航链接
• justify-content-between 导航子项两边分散对齐
• nav-item 导航子项
• nav-pills 胶囊导航样式
• nav-tabs tabs样式,像导航栏
• nav-fill 内容撑开宽度
• 选项卡样式

<div class="row mt-5">
            <div class="col">
                <ul class="nav nav-tabs">
                    <li class="nav-item"><a href="#home" class="nav-link active" data-toggle="tab">Home</a></li>
                    <li class="nav-item"><a href="#profile" class="nav-link" data-toggle="tab">Profile</a></li>
                    <li class="nav-item"><a href="#contact" class="nav-link" data-toggle="tab">Contact</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane show acitve fade" id="home">HomeHomeHome</div>
                    <div class="tab-pane fade" id="profile">HProfileProfileProfile</div>
                    <div class="tab-pane fade" id="contact">ContactContactContactContacte</div>
                </div>
            </div>
        </div>

• 事件

 <div class="row mt-5">
            <ul class="nav nav-pills flex-column col-3" id="mymenu">
                <li class="nav-item"><a href="#home2" class=" nav-link ">Home</a></li>
                <li class="nav-item"><a href="#profile2" class="nav-link">Profile</a></li>
                <li class="nav-item"><a href="#contact2" class=" nav-link">Contact</a></li>
            </ul>
            <div class="tab-content col-9">
                <div class="tab-pane fade show" id="home2">HomeHomeHome</div>
                <div class="tab-pane fade" id="profile2">HProfileProfileProfile</div>
                <div class="tab-pane fade" id="contact2">ContactContactContactContacte</div>
            </div>
        </div>

        $('#mymenu li:first-child a').tab('show')
        $('#mymenu li a').on('click', function () {
            $(this).tab('show')
        })
        $('#mymenu li:first-child a').on('show.bs.tab', function () {
            console.log('该内容要显示了')
        })
        $('#mymenu li:first-child a').on('shown.bs.tab', function () {
            console.log('该内容已经显示了')
        })
        $('#mymenu li:first-child a').on('hide.bs.tab', function () {
            console.log('要消失了')
        })
        $('#mymenu li:first-child a').on('hidden.bs.tab', function () {
            console.log('已经完全消失了')
        })

返回顶部

导航栏

• navbar 导航栏组件
  • navbar-brand 导航栏logo
    • align-top导航栏文本垂直居中对齐
  • navbar-nav 导航栏
    • nav-item 导航栏子项
      • nav-link 链接
• navbar-expand 响应式导航栏
  • navbar-toggler 按钮
  • navbar-collapse 响应式导航栏隐藏
    返回顶部

分页

• Page 分页组件
  • pagination 分页容器
    • page-item 分页子项
      • page-link 分页链接
  • pagination-lg 大分页
  • pagination-sm 小分页
    返回顶部

提示框

• 提示框和提示冒泡与其他不一样的是需要初始化，且都是属性值
• data-toggle=“popover” 提示框属性
• title=“这里放的是标题” 标题
• data-content=“这里放的是提示框的内容” 内容
• 提示框的四个方向
  • data-placement=“top” 上
  • data-placement=“right” 右
  • data-placement=“bottom” 下
  • data-placement=“left” 左
• data-animation = ‘true’ 提示框是否有过渡动画
• data-container = ‘#id’ 是让标题加在body的一个id元素里面
• data-delay = ‘2000’ 延迟时间
• data-offset = ‘100’ 出现的位置
• data-trigger = ‘hover’ 鼠标放入就显示
• data-template = 显示提示框的结构
• data-html = 加粗文字让提示框出来的文字加粗
• data-select = 提供选择器,接收数据后添加class

$(function(){
    //初始化
    $('[data-toggle="popover"]').popover();
    //显示
    $(this).popover('show');
    //隐藏
    $(this).popover('hide')
    //显示隐藏切换
    $(this).popover('toggle')
    //销毁
    $(this).popover('dispose')
    //创建[data-toggle="popover"]
    $(this).popover('enable')
    //删除[data-toggle="popover"]
    $(this).popover('disable')
    //创建删除
    $(this).popover('toggleEnabled')
     
    // 事件
    $(this).on('show.bs.popover',function(){
        console.log('显示开始')
    })
        $(this).on('shown.bs.popover',function(){
        console.log('显示好了')
    })
        $(this).on('hide.bs.popover',function(){
        console.log('开始隐藏')
    })
        $(this).on('hidden.bs.popover',function(){
        console.log('隐藏好了')
    })
        $(this).on('inserted.bs.popover',function(){
        console.log('创建好了dom')
    })
})

返回顶部

提示冒泡

• data-toggle=“tooltip” 冒泡框提示
• data-placement=“top” 上
• data-placement=“right” 右
• data-placement=“bottom” 下
• data-placement=“left” 左
• data-animation = ‘true’ 提示框是否有过渡动画
• data-container = ‘#id’ 是让标题加在body的一个id元素里面
• data-delay = ‘2000’ 延迟时间
• data-offset = ‘100’ 出现的位置
• data-trigger = ‘hover’ 鼠标放入就显示
• data-template = 显示提示框的结构
• data-html = 加粗文字让提示框出来的文字加粗
• data-select = 提供选择器,接收数据后添加class

$(function(){
    //初始化
    $('[data-toggle="tooltip"]').popover();
    //显示
    $(this).tooltip('show');
    //隐藏
    $(this).tooltip('hide')
    //显示隐藏切换
    $(this).tooltip('toggle')
    //销毁
    $(this).tooltip('dispose')
    //创建[data-toggle="popover"]
    $(this).tooltip('enable')
    //删除[data-toggle="popover"]
    $(this).tooltip('disable')
    //创建删除
    $(this).tooltip('toggleEnabled')
     
    // 事件
    $(this).on('show.bs.popover',function(){
        console.log('显示开始')
    })
        $(this).on('shown.bs.popover',function(){
        console.log('显示好了')
    })
        $(this).on('hide.bs.popover',function(){
        console.log('开始隐藏')
    })
        $(this).on('hidden.bs.popover',function(){
        console.log('隐藏好了')
    })
        $(this).on('inserted.bs.popover',function(){
        console.log('创建好了dom')
    })
})

返回顶部

进度条

• progress 引入
  • progress-bar 进度条子项
  • progress-bar-striped 条纹进度条
  • progress-bar-animated 动画进度条
    返回顶部

滚动监控

• 需要给添加scoll
• data-target=“#scroll” 绑定id
• data-offset=“0” 设置滚动监听
• data-spy=“scroll” scroll事件
• bodyScroll需要设置固定高和滚动条和绝对定位

<div class="list-group col-2">
    <a href="#item1" class="fode list-group-item  list-group-item-action">item1</a>
    <a href="#item2" class="fode list-group-item  list-group-item-action">item2</a>
    <a href="#item3" class="fode list-group-item  list-group-item-action">item3</a>
    <a href="#item4" class="fode list-group-item  list-group-item-action">item4</a>
</div>
<div class="bodyScoll1 col-10"data-target="#scoll" data-offset="0" data-spy="scroll"  >
    <h5 id="item1">item1</h5>
    <p>...</p>
    <h5 id="item2">item1</h5>
    <p>...</p>
    <h5 id="item3">item1</h5>
    <p>...</p>
    <h5 id="item4">item1</h5>
    <p>...</p>
</div>

返回顶部

旋转加载

• spinner-border 空心圆加载
• spinner-grow 放大圆加载
• spinner-grow-sm 放大圆小圆
• spinner-border-sm 空心圆小圆
  返回顶部

消息提示框

• toast 组件引入
  • toast-header 头部
  • toast-body 身体
• data-autohide=“false” 是否隐藏
• data-animation=“true” 是否用过渡动画
• data-delay=“2000” 延迟时间消失

<div class=" mt-5">
    <div class="toast "data-autohide="false" data-animation="true" data-delay="2000">
        <div class="toast-header">
            <strong class="mr-auto">Bootstrap</strong>
            <small>11 mins ago</small>
            <button class="close ml-1 mb-1" data-dismiss="toast">
                <span>&times;</span>
            </button>
        </div>
        <div class="toast-body">Hello,World,This is NeW World</div>
    </div>
</div>
<script>
                $(function(){
                $('.toast').toast('show'); //显示
                $('.toast').toast('hide'); //隐藏
                //事件
                $('.toast').on('show.bs.toast',function(){
                    console.log('消息框要显示了')
                })
                $('.toast').on('shown.bs.toast',function(){
                    console.log('消息框显示了')
                })
                $('.toast').on('hide.bs.toast',function(){
                    console.log('消息框要隐藏了')
                })
                $('.toast').on('hidden.bs.toast',function(){
                    console.log('消息框隐藏了')
                })
            })
</script>

返回顶部
animation=“true” data-delay=“2000”>

Bootstrap
11 mins ago

×

Hello,World,This is NeW World

``` [返回顶部](#顶部)