单按钮：
背景按钮：bootstrap提供了具有特殊意义背景的按钮样式，使用时只需给自己的按钮(button、input、a)加bootstrap提供的类名即可，其具体如下：
边框按钮：bootstrap不仅提供了具有特殊意义背景颜色的按钮，而且还提供了具有特殊意义颜色边框的按钮；此类按钮当鼠标移上去时字体颜色变白色,背景变为边框的颜色；宽度自适应，高度由行高或内容决定，具体如下：
大号小号及块级按钮：bootstrap提供了大号按钮和小号及块级按钮，使用时给上面组合方式另加此类即可：如：
禁用按钮：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提供了将按钮放到一个组的类，这样可以将相关的按钮整合到一起，中间不留缝隙，具体类及说明如下：
<!-- 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标签添加徽章类名，当然其他标签添加此类类名也是生效的，具体类名如下：
进度条：
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@联系笔者删除。
笔者：苦海
