bootstrap中单个按钮按钮组徽章进度条
Posted 苦海123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap中单个按钮按钮组徽章进度条相关的知识，希望对你有一定的参考价值。
单按钮：
背景按钮：bootstrap提供了具有特殊意义背景的按钮样式，使用时只需给自己的按钮(button、input、a)加bootstrap提供的类名即可，其具体如下：
| 类名 | 描述 |
|---|---|
| .btn | 基本按钮：灰色、有高度、宽度自适应、没有原始边框，表示基本；使用此类名后一组垂直按钮的宽度将各自相互保持相等 |
| .btn-primary | 主要按钮：蓝色、高度由行高决定、宽度自适应，表示主要 |
| .btn-secondary | 次要按钮：深灰色、高度由行高决定、宽度自适应，表示次要 |
| .btn-success | 成功按钮：深绿色色、高度由行高决定、宽度自适应，表示成功 |
| .btn-info | 信息按钮：天蓝色、高度由行高决定、宽度自适应，表示信息 |
| .btn-warning | 警告按钮：橙黄色、高度由行高决定、宽度自适应，表示警告 |
| .btn-danger | 危险按钮：红色、高度由行高决定、宽度自适应，表示危险 |
| .btn-dark | 黑色按钮：可以用于提交等按钮 |
| .btn-light | 暗白色：可用于没什么太大作用的地方 |
| .btn-link | 链接按钮：白色背景、黑色边框、鼠标经过边框消失下划线出现 |
| 组合型 | 使用bootstrap中按钮样式时推荐.btn + btn- |
边框按钮：bootstrap不仅提供了具有特殊意义背景颜色的按钮，而且还提供了具有特殊意义颜色边框的按钮；此类按钮当鼠标移上去时字体颜色变白色,背景变为边框的颜色；宽度自适应，高度由行高或内容决定，具体如下：
| 类名 | 描述 |
|---|---|
| .btn-outline-primary | 主要按钮：蓝色边框，表示主要 |
| .btn-outline-secondary | 次要按钮：灰色边框，表示次要 |
| .btn-outline-success | 成功按钮：绿色边框，表示成功 |
| .btn-outline-info | 信息按钮：天蓝色边框，表示信息 |
| .btn-outline-warning | 警告按钮：橙色边框，表示警告 |
| .btn-outline-danger | 危险按钮：红色边框，表示危险 |
| .btn-outline-dark | 黑色按钮：黑色边框，可表示普通 |
| .btn-outline-light | 白色按钮，白色边框，字体颜色淡灰色，似乎没有 |
| 组合型 | 开发中还是推荐.btn + .btn-outline- 的组合搭配 |
大号小号及块级按钮：bootstrap提供了大号按钮和小号及块级按钮，使用时给上面组合方式另加此类即可：如：
| 类名 | 描述 |
|---|---|
| .btn-lg | 定义了一个较大的按钮，宽度约100px |
| .btn-sm | 定义了一个较小的按钮，宽度约70px |
| .btn-block | 定义一个独占一行的块级按钮 |
| 组合型 | 此类都是搭配上面的类样式进行运用 |
禁用按钮：bootstrap中disabled类可以禁用一个按钮，这个类同样适用于不支持disabled属性的标签,如a标签，（测试得出：这两个类名功能对a标签按钮是有效的；对button和input按钮，仅仅是样式上面发生变化，行为还是存在的），如：
<body>
<div class="box text-info">
<p>测试bootstrap中disabled和active类在button、input、a按钮中功能</p>
</div>
<button class="btn btn-danger">禁用按钮</button>
<button class="btn btn-success">激活按钮</button>
<button class="btn btn2 btn-secondary">button型：显示/关闭</button>
<input type="button" class="btn btn-outline-secondary" value="input型：显示/关闭">
<a href="#" class="btn btn-primary">a型：显示/关闭</a>
<script>
var $box = $(document.querySelector('.box'));
var $button = $(document.querySelectorAll('button')[0]);
var $button1 = $(document.querySelectorAll('button')[1]);
var $button2 = $(document.querySelectorAll('button')[2]);
var $input = $(document.querySelectorAll('input'));
var $aBtn = $(document.querySelectorAll('a'));
// 禁用按钮：
$button.on('click', function() {
$button2.addClass('disabled');
$button2.removeClass('active');
$input.addClass('disabled');
$input.removeClass('active');
$aBtn.addClass('disabled');
$aBtn.removeClass('active');
});
// 激活按钮：
$button1.on('click', function() {
$button2.addClass('active');
$button2.removeClass('disabled');
$input.addClass('active');
$input.removeClass('disabled');
$aBtn.addClass('active');
$aBtn.removeClass('disabled');
});
// //三种按钮处理逻辑，可以使用：不同元素注册相同事件优化代码
// $button2.on('click', function() {
// $box.toggleClass('fade');
// });
// $input.on('click', function() {
// $box.toggleClass('fade');
// });
// $aBtn.on('click', function() {
// $box.toggleClass('fade');
// });
// 不同元素注册相同事件处理显示/关闭逻辑：
$('.btn2,input,a').on('click', function() {
$box.toggleClass('fade');
});
</script>
</body>
按钮组：
bootstrap提供了将按钮放到一个组的类，这样可以将相关的按钮整合到一起，中间不留缝隙，具体类及说明如下：
| 类名 | 描述 |
|---|---|
| .btn-group | 将一组按钮用一个容器包裹，并给容器此类名后，各个按钮之间没有间隙，会紧紧挨在一起 |
| .btn-group-sm (lg) | 将一组按钮缩小或放大一些，此类名设置给按钮的父级容器 |
| . btn-group-vertical | 将一组按钮垂直排列，且各个按钮之间没有间隙 |
| data-toggle=“dropdown” | 给按钮设置下拉可选功能（此时不能实现下拉菜单效果中关闭状态，闭合状态需要配合 dropdown-menu容器才能实现闭合），此功能需要 popper.min.js文件（如果本地文件无效果，使用cdn资源即可） |
| .dropdown-menu | 将一组元素（一般为一组相同标签的按钮）隐藏起来，通过具有自定义属性的data-toggle="dropdown"按钮显示出来 |
| .dropdown-toggle | 位于按钮右边的小三角形，用于定义下拉菜单右边提示符 |
| .dropdown-item | 用于居中 dropdown-menu容器中自身元素及去除默认样式 |
<!-- 1.定义下拉菜单按钮： -->
<div class="btn-group"><!--这里btn-group类名可以不用加，因为一个组中只定义一个下拉按钮；
当页面中只有一组下拉按钮时，去掉此容器也不会影响，但是一般便于管理等会给一个容器包裹；
当页面有多个下拉按钮时，此容器不能省略，否则页面上下拉的dropdown-menu会和其他dropdown-menu发生冲突（靠近data-toggle="dropdown"的dropdown-menu会被显示出来）-->
<button class="dropdown-toggle" data-toggle="dropdown">菜单1</button><!--dropdown-toggle类仅仅给data-toggle="dropdown"右边添加一个三角形符，
没有功能上的限制；data-toggle="dropdown"定义了点击展示和收起的功能--->
<div class="dropdown-menu"><!--dropdown-menu用于隐藏其里面的元素-->
<a class="dropdown-item" href="#">a1</a><!--推荐在dropdown-menu里面放入性质一致的元素供选择，当然不一致也不会报错，但是实际开发中可很少有人这么做--->
<a class="dropdown-item" href="#">a2</a><!--dropdown-item用于居中dropdown-menu中的元素-->
<a class="" href="#">a3</a>
<button class="dropdown-item">button</button>
<input type="submit" class="dropdown-item" value="input">
</div>
</div>
<!-- 2.定义横向下拉菜单按钮和无下拉按钮： -->
<div class="btn-group">
<button class="btn">菜单1</button>
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">菜单2</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">a1</a>
<a class="dropdown-item" href="#">a2</a>
</div>
</div>
</div>
<!-- 3.定义垂直排列的下拉按钮及无需下拉按钮： -->
<div class="btn-group-vertical"><!-- btn-group-vertical将一组水平按钮垂直排列 -->
<button class="btn">菜单1</button>
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">菜单2</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">a1</a>
<a class="dropdown-item" href="#">a2</a>
</div>
</div>
<button class="btn">菜单3</button>
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">菜单4</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">a1</a>
<a class="dropdown-item" href="#">a2</a>
</div>
</div>
</div>
徽章：
徽章是bootstrap中提供用于突出显示的类样式，推荐将要突出显示的文本等用span标签包裹，给span标签添加徽章类名，当然其他标签添加此类类名也是生效的，具体类名如下：
| 类名 | 描述 |
|---|---|
| .badge | 字号减小，四角有0.25rem的圆角，和下面badge-搭配也是有稍微的圆角 |
| .badge-primary | 蓝色方框背景，表示主要 |
| .badge-secondary | 灰色方框背景，表示次要 |
| .badge-success | 绿色方框背景，表示成功 |
| .badge-danger | 红色方框背景，表示危险 |
| .badge-warning | 橙色方框背景，表示警告 |
| .badge-info | 天蓝色方框背景，表示信息 |
| .badge-light | 暗白色方框背景，表示浅色 |
| .badge-dark | 淡黑色方框背景，表示深色 |
| .badge-pill | 定义药丸形边框背景，但是需要和上面具有意义的其他.badge-型搭配才有效果 |
进度条：
bootstrap中提供了进度条的类样式，进度条的创建需要两个定义好类，一个给父级容器的progress；类；另一个progress-bar给父容器中的子容器，子容器中需要设置style=“widht:50%”（无论是js还是css设置宽度，只要是设置了宽度就会显示进度;进度条默认高度16px,可以通过css或js来修改）来表示进度条当前位置，如：
<body>
<div class="progress" style="width:500px">
<div class="progress-bar"></div>
</div>
<h2></h2>
<script>
var $h2 = $(document.querySelector('h2'));
var $bar = $(document.querySelector('.progress-bar'));
var widthBar = 0;
var time1 = setInterval(function() {
widthBar += 5;
$bar.css('width', widthBar + '%');
if (widthBar > 100) {
clearInterval(time1);
$h2.html('进度条结束了！');
};
}, 100);
</script>
</body>
不同颜色进度条：进度条同样是支持背景颜色类样式类名的，可以给进度条加bootstrap中定义好的背景颜色类名来修改进度条颜色。
<div class="progress" style="width:500px">
<div class="progress-bar bg-danger" style="width:60%"></div>
</div>
条纹进度条：progress-bar-striped类用来定义条纹进度条，但是此类需要搭配progress-bar类才显示，如：
<div class="progress" style="width:500px">
<div class="progress-bar progress-bar-striped" style="width:90%"></div>
</div>
动画进度条：progress-bar-animated类用来定义具有动画效果的进度条，但是此类需要同时搭配progress-bar和 progress-bar-striped，如：
<div class="progress" style="width:500px">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:90%"></div>
</div>
混合进度条：一个progress容器可以放入多个progress-bar，如下：
<div class="progress" style="width:500px">
<div class="progress-bar" style="width:10%"></div>
<div class="progress-bar bg-dark" style="width:10%"></div>
<div class="progress-bar bg-success progress-bar-striped" style="width:10%"></div>
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width:10%"></div>
</div>
注意：进度条的类名不仅仅可以给div，也可以给ul,li等标签，同样是生效的，但是有的容器会有点布局上面的问题（ul左边会有一部分留白），可以自己进行调试，当然还是推荐div的。
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海
以上是关于bootstrap中单个按钮按钮组徽章进度条的主要内容，如果未能解决你的问题，请参考以下文章