Bootstrap 3 按钮标签实例代码


Posted in Javascript onFebruary 21, 2017

本文给大家介绍按钮标签的实例代码,具体内容如下:

通过将按钮类添加到 <a>,  <button>,  <input> 来实现按钮样式

<a class="btn btn-default" href="#" rel="external nofollow" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

仅仅 <button> 适用于导航条以及导航条控件

如果 <a> 被作为按钮使用而不是链接, 请注意添加 role="button"

高度推荐使用 <button>

选项

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

尺寸

通过添加 .btn-lg , .btn-sm , .btn-xs 来实现尺寸

<p>
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
 <button type="button" class="btn btn-primary">Default button</button>
 <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
 <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

通过添加 .btn-block 来实现块级按钮

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

激活状态

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

禁用状态

IE9以下无法兼容

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

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

Javascript 相关文章推荐
jQuery初学:find()方法及children方法的区别分析
Jan 31 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
node.js发送邮件email的方法详解
Jan 06 Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
vue权限问题的完美解决方案
May 08 Javascript
Angular实现购物车计算示例代码
Feb 21 #Javascript
原生js实现倒计时--2018
Feb 21 #Javascript
vue-router:嵌套路由的使用方法
Feb 21 #Javascript
JavaScript中创建对象的7种模式详解
Feb 21 #Javascript
vue-router路由简单案例介绍
Feb 21 #Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 #Javascript
微信小程序 UI与容器组件总结
Feb 21 #Javascript
You might like
PHP延迟静态绑定示例分享
2014/06/22 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
php算法实例分享
2015/07/14 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
js获取 type=radio 值的方法
2014/05/09 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
2016/08/16 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
Node 代理访问的实现
2019/09/19 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python监控nginx端口和进程状态
2019/09/06 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
关于Python解包知识点总结
2020/05/05 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
工程监理应届生求职信
2013/11/09 职场文书
逃课上网检讨书
2014/02/20 职场文书
黄金搭档广告词
2014/03/21 职场文书
献爱心倡议书
2014/04/14 职场文书
幼儿园标语大全
2014/06/19 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
python 字典和列表嵌套用法详解
2021/06/29 Python