Bootstrap class快捷笔记

晋西岭

2023-12-01

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>

<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”>

Hello,World,This is NeW World

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

Bootstrap class快捷笔记

Bootstrap快捷笔记

列表

媒体类型

媒体特性

逻辑运算符

@规则

容器

行

列

对齐

排序

偏移

字体样式

表格

图文区

图片

浮动

边框

显示

隐藏

嵌入

弹性盒子

子元素排序方式

自动的间距

定位

阴影

关闭图标

图像替换

内容溢出

间距

文本溢出打点

警告框

徽章

面包屑导航

按钮

卡片

轮播图

折叠面板

下拉菜单

表单

输入框组

超大屏幕

列表组

模态框

媒体对象

导航

导航栏

分页

提示框

提示冒泡

进度条

滚动监控

旋转加载

消息提示框

相关阅读

相关文章

相关问答

相关文档