如何使用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 相关文章推荐
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
Vue中的Vux配置指南
Dec 08 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
js canvas实现俄罗斯方块
Oct 11 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
vue2.0+SVG实现音乐播放圆形进度条组件
2019/09/21 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
2020/05/01 Javascript
wxPython窗口的继承机制实例分析
2014/09/28 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
django之自定义软删除Model的方法
2019/08/14 Python
python中property属性的介绍及其应用详解
2019/08/29 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
css3使网页、图片变成灰色兼容大多数浏览器
2014/07/02 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
什么是唯一索引
2015/07/05 面试题
体育教育个人自荐信范文
2013/12/01 职场文书
文案策划求职信
2014/03/18 职场文书
教师个人成长总结
2015/02/11 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js