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中单个按钮、按钮组、徽章、进度条相关推荐

php怎样查看视频播放的进度条,H5中视频与音频标签和进度条如何使用
这次给大家带来H5中视频与音频标签和进度条如何使用,H5中视频与音频标签和进度条使用的注意事项有哪些,下面就是实战案例,一起来看一下. 最近项目中使用Html5的video和audio标签来在线播放视 ...
ajax加载进度百分比,在ajax中显示加载百分比的进度条，php
您好我正在使用ajax加载数据库内容.我想显示加载或图像的总百分比.在ajax中显示加载百分比的进度条,php 这是我的脚本 function name1(str) { if (str.length= ...
android下载通知栏,Android开发中实现下载文件通知栏显示进度条
android开发中实现下载文件通知栏显示进度条. 1.使用asynctask异步任务实现,调用publishprogress()方法刷新进度来实现(已优化) public class myasync ...
android按钮进度动画,android – 在按钮后面放置一个进度条
要做到这一点,我必须首先在main.xml中定义按钮,然后是进度条,如下所示: android:id="@+id/search_button" android:layout_wid ...
Gtk常用控件按钮图片控件进度条滑动窗口分栏列表
Gtk常用控件按钮(GtkButton) // 带图标按钮的创建 // image: 通过 gtk_image_new_from_file()来创建, 参数为图片的路径 void gtk_butto ...
04.tooltip提示框插件，linkbutton按钮插件与progressbar进度条插件
tooltip提示框插件 1 渲染方式 2 属性 3 事件 4 方法 linkbutton按钮插件 21 渲染方式 22 属性 23 方法 progressbar进度条插件 1 渲染方式 2 属性 3 ...
Android中的常用控件之进度条（ProgressBar）
ProgressBar的常用属性 style(进度条的样式,默认为圆形:用style="?android:attr/progressBarStyleHorizontal"可以将进度 ...
php excel 进度,在php中生成Excel文件时显示进度条
我有一个 HTML表单,当您通过单击按钮提交表单时,应用程序使用 PHPExcel生成Excel文件.一切正常,但是当excel文件很大时,等待时间很长.我想添加进度条或显示完整百分比值.我的问题是我 ...
C#实现给DevExpress中GridView表格指定列添加进度条显示效果——代码实现方式
一.问题描述在我们使用Winform配合DevExpress进行开发表格时,表格中的涉及到百分比数据的内容除了显示百分比的数字内容外,还希望搭配显示进度条效果(且低于百分之60的内容用红色表示不合格 ...

bootstrap中单个按钮、按钮组、徽章、进度条

bootstrap中单个按钮、按钮组、徽章、进度条相关推荐

最新文章

热门文章