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>×</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 -->
× 是x<div class="alert alert-warning alert-dismissible fade show">这是一个可以关闭的警告框,但是需要引入jquery和bootstrap.js<button class="close" data-dismiss="alert">×</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) //下一个domconsole.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 链接
- nav-item 导航栏子项
- navbar-brand 导航栏logo
- navbar-expand 响应式导航栏
- navbar-toggler 按钮
- navbar-collapse 响应式导航栏隐藏
返回顶部
分页
- Page 分页组件
- pagination 分页容器
- page-item 分页子项
- page-link 分页链接
- page-item 分页子项
- pagination-lg 大分页
- pagination-sm 小分页
返回顶部
- pagination 分页容器
提示框
- 提示框和提示冒泡与其他不一样的是需要初始化,且都是属性值
- 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>×</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
×
``` [返回顶部](#顶部)
Bootstrap class快捷笔记相关推荐
- bootstrap框架学习笔记
bootstrap框架学习笔记 1.Bootstrap简介 2.基本使用 3.容器 4.设备划分 5.栅格系统 6.展示与隐藏 7.其他类前缀 8.组件直接参考开发文档 1.Bootstrap简介 B ...
- 05.Bootstrap导入基础笔记
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...
- 快速构建网站或移动端页面:关于Bootstrap的学习笔记
最近在设计官网,并进行一些项目的原型设计和开发,寻找了很久,想找到一个更简单.快速的方式,基于一些已有的模板或框架进行快速建设,结果发现很多时间都是徒劳,走过的路分享给大家,以防再度踩坑: 网上搜索原 ...
- Bootstrap使用后笔记
Bootstrap Modal 垂直居中 在 bootstrap.js中修改如下代码: Modal.prototype.adjustDialog = function () { var modalIs ...
- Bootstrap的学习笔记
1 前言 今天开始学习Bootstrap啦~ 2 布局--container 2.1 container的左右两侧会有空白--px-0 container的两侧可能会出现空白,(如果设置了背景色,就会 ...
- Vue Bootstrap 结合学习笔记(一)
本文是不才在学习Vue和Bootstrap过程中遇到问题解决的一些思路,主要描述了项目搭建,组件封装.获取.编辑.更新的一步步实现,一些解决方案也没找到正确的官方API,还请大拿们多多提点. 项目介绍 ...
- bootstrap 详细教程笔记
BootStrap 1.主要内容 2.BootStrap的安装和使用 2.1. BootStrap介绍 中文网:https://www.bootcss.com/ BootStrap是一套现成的CSS样 ...
- Bootstrap 与 Jackknife 笔记
[转载]:https://cosx.org/2008/11/outlook-on-statistical-methods 一般情况下,总体永远都无法知道,我们能利用的只有样本,现在的问题是,样本该怎样 ...
- Bootstrap学习总结笔记(2)-- 基本样式之表格
Bootstrap实现了大量基本样式,包括表格.表单.按钮.图片等.基本的使用方法是通过添加特定的class来实现. Bootstrap 提供了一个清晰的创建表格的布局. 0x01 表格样式 (1)基 ...
- bootstrap studio使用笔记
一.基本操作 1.预览 2.调整位置和大小 3.复制操作 也可以在本页面进行复制,然后粘贴到其他页面,在左侧的overview处选择粘贴的位置,粘贴模式选择pasetd linked 4.拖拽式导入图 ...
最新文章
- win7科学计算机的用法,win7中计算器的多种用法
- 【pyQuery】抓取startup news首页
- 基于Annotation的输入校验
- MySQL数据库(八) 一一 数据库信息和使用序列
- Xamarin XAML语言教程构建ControlTemplate控件模板
- 【Android 逆向】Android 进程代码注入原理 ( 注入本质 | 静态注入和动态注入 | 静态注入两种方式 | 修改动态库重打包 | 修改 /data/app/xx/libs 动态库 )
- 中公教育计算机网络,计算机考试题库:计算机网络模拟练习题(2)
- JS将指定的时间戳转为UTC时间
- 惊现漏洞门!大众汽车被曝安全风险,1分钟内即可轻易解锁
- 订单状态 css_CSS状态2019
- vuex状态持久化_Vuex持久化存储之vuex-persist
- 曝华为新成立10大预备军团;被罚2500万欧元,苹果开放第三方支付;GitLab 14.8发布 | 极客头条...
- linux中KVM桥接网卡br0
- php标签class,dede模板标签以及dedetag.class.php模板类使用方法
- Ubuntu下解决文件名mp3标签和文本文件内容的乱码问题
- java sigar cpu使用率_sigar相关-单个进程占CPU百分比
- js生成二维码的几种方法
- JS插件开发之LightBox图片画廊
- Mybatis注解@Results、@Result、@ResultMap
- 手把手教你用JAVA调用Websocket实现“声音转换”功能(变声)标贝科技
热门文章
- Android 阶段性开发学习知识点(自用)
- MyEclipse详解
- ajax创建未读消息列表,定时(隔一段时间)提交ajax更新未读消息
- 房屋租赁统一管理服务平台的研究与开发(JavaSSM)
- outlook正在使用outlook数据文件(.ost)旧的副本,请退出outlook,删除此文件,然后重启outlook。
- 浅谈C中的malloc和free “来自bccn C语言论坛”
- jsoncpp操作类
- 教你使用Spy++查看软件的流氓行径(talimama/Dandelion.exe)
- C# WinForm GUI之示例
- 一个不用背单词的高效英文学习法