如何使用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 相关文章推荐
JavaScript语句可以不以;结尾的烦恼
Mar 08 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
js实现省市级联效果分享
Aug 10 Javascript
AngularJS ui-router刷新子页面路由的方法
Jul 23 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
May 07 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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
PHP无限分类的类
2007/01/02 PHP
一周让你学会PHP 不错的学习资料
2009/02/06 PHP
JavaScript版代码高亮
2006/06/26 Javascript
JS input 数字验证代码
2009/07/30 Javascript
JavaScript 组件之旅(二)编码实现和算法
2009/10/28 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
js实现二级导航功能
2017/03/03 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
建筑自我鉴定
2013/10/19 职场文书
全陪导游欢迎词
2014/01/17 职场文书
党员四风问题个人对照检查材料
2014/10/26 职场文书
教师党员个人总结
2015/02/10 职场文书
催款函怎么写
2015/06/24 职场文书
详解python字符串驻留技术
2021/05/21 Python
JavaScript的function函数详细介绍
2021/11/20 Javascript
Java无向树分析 实现最小高度树
2022/04/09 Javascript
python内置模块之上下文管理contextlib
2022/06/14 Python