如何使用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函数的重载
Sep 22 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
小文件php+SQLite存储方案
2010/09/04 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python 操作文件的基本方法总结
2017/08/10 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
python中update的基本使用方法详解
2019/07/17 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
经典c++面试题二
2015/08/14 面试题
火山动力Java笔试题
2014/06/26 面试题
大学三年计划书范文
2014/04/30 职场文书
考试作弊检讨书
2015/01/27 职场文书
庭外和解协议书
2016/03/23 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
python基础详解之if循环语句
2021/04/24 Python