如何使用Bootstrap 按钮实例详解


Posted in Javascript onMarch 29, 2017

Bootstrap 按钮

本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式,具体如下表所示:

以下样式可用于<a>, <button>, 或 <input> 元素上:

如何使用Bootstrap 按钮实例详解

下面的实例演示了上面所有的按钮 class:

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果,标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮,看起来像一个链接,但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

效果

如何使用Bootstrap 按钮实例详解

按钮大小

下表列出了获得各种大小按钮的 class:

如何使用Bootstrap 按钮实例详解

<p>
 <button type="button" class="btn btn-primary btn-lg">大的原始按钮</button>
 <button type="button" class="btn btn-default btn-lg">大的按钮</button>
</p>
<p>
 <button type="button" class="btn btn-primary">默认大小的原始按钮</button>
 <button type="button" class="btn btn-default">默认大小的按钮</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">小的原始按钮</button>
 <button type="button" class="btn btn-default btn-sm">小的按钮</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">特别小的原始按钮</button>
 <button type="button" class="btn btn-default btn-xs">特别小的按钮</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg btn-block">块级的原始按钮</button>
 <button type="button" class="btn btn-default btn-lg btn-block">块级的按钮</button>
</p>

效果

如何使用Bootstrap 按钮实例详解

按钮状态

Bootstrap 提供了激活、禁用等按钮状态的 class,下面将进行详细讲解。

激活状态

按钮在激活时将呈现为被按压的外观(深色的背景、深色的边框、阴影)。

如何使用Bootstrap 按钮实例详解

下表列出了让按钮元素和锚元素呈激活状态的 class:

<p>
 <button type="button" class="btn btn-default btn-lg ">默认按钮</button>
 <button type="button" class="btn btn-default btn-lg active">激活按钮</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
 <button type="button" class="btn btn-primary btn-lg active">激活的原始按钮</button>
</p>

如何使用Bootstrap 按钮实例详解

禁用状态

当您禁用一个按钮时,它的颜色会变淡 50%,并失去渐变。

下表列出了让按钮元素和锚元素呈禁用状态的 class:

如何使用Bootstrap 按钮实例详解 

下面的实例演示了这点:

<p>
 <button type="button" class="btn btn-default btn-lg">默认按钮</button>
 <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg ">原始按钮</button>
 <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按钮</button>
</p>
<p>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default btn-lg" role="button">链接</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>
</p>
<p>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary btn-lg" role="button">原始链接</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary btn-lg disabled" role="button">禁用的原始链接</a>
</p>

效果

如何使用Bootstrap 按钮实例详解

按钮标签

您可以在 <a>、<button> 或 <input> 元素上使用按钮 class。但是建议您在 <button> 元素上使用按钮 class,避免跨浏览器的不一致性问题。

下面的实例演示了这点:

<a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">链接</a>
<button class="btn btn-default" type="submit">按钮</button>
<input class="btn btn-default" type="button" value="输入">
<input class="btn btn-default" type="submit" value="提交">

以上所述是小编给大家介绍的使用Bootstrap 按钮实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery解析xml字符串简单示例
Apr 11 Javascript
JavaScript中getUTCSeconds()方法的使用详解
Jun 11 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
JS打开摄像头并截图上传示例
Feb 18 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
js实现双人五子棋小游戏
May 28 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 #Javascript
vue2组件实现懒加载浅析
Mar 29 #Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 #Javascript
如何使用Bootstrap创建表单
Mar 29 #Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 #Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 #jQuery
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 #Javascript
You might like
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
页面利用渐进式JPEG来提升用户体验度
2014/12/01 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
js实现透明度渐变效果的方法
2015/04/10 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
jquery实现点击展开列表同时隐藏其他列表
2015/08/10 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
详解网站中图片日常使用以及优化手法
2017/01/09 Javascript
用director.js实现前端路由使用实例
2017/01/27 Javascript
微信小程序授权获取用户详细信息openid的实例详解
2017/09/20 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
js实现省级联动(数据结构优化)
2020/07/17 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python使用线程封装的一个简单定时器类实例
2015/05/16 Python
python开发之list操作实例分析
2016/02/22 Python
Python中property函数用法实例分析
2018/06/04 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
Python新手学习函数默认参数设置
2020/06/03 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
甜品店的创业计划书范文
2014/01/02 职场文书
项目投资意向书
2014/04/01 职场文书
《观舞记》教学反思
2014/04/16 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
2014年商场工作总结
2014/11/22 职场文书
委托书格式范文
2015/01/28 职场文书
小学教师节活动总结
2015/03/20 职场文书
天河观后感
2015/06/11 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫