如何使用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 相关文章推荐
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
微信小程序常用赋值方法小结
Apr 30 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
php动态实现表格跨行跨列实现代码
2012/11/06 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
基于Javascript实现倒计时功能
2016/02/22 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
vue实现选中效果
2020/10/07 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
Python 中 list 的各项操作技巧
2017/04/13 Python
彻底搞懂Python字符编码
2018/01/23 Python
Python中logging实例讲解
2019/01/17 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
微软台湾官方网站:Microsoft台湾
2018/08/15 全球购物
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
UNIONBAY官网:美国青少年服装品牌
2019/03/26 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
应届本科生推荐信范文
2013/12/25 职场文书
生日邀请函范文
2014/01/13 职场文书
促销活动总结
2014/04/28 职场文书
诚信承诺书模板
2014/05/26 职场文书
分公司总经理岗位职责
2014/07/30 职场文书
政协调研汇报材料
2014/08/15 职场文书
财务工作检讨书
2014/10/29 职场文书
对领导班子的意见和建议
2015/06/08 职场文书
初中政教处工作总结
2015/08/12 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
Linux中如何安装并部署Redis
2022/04/18 Servers