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 相关文章推荐
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
详解jQuery lazyload 懒加载
Dec 19 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
Oct 30 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 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调用新浪短链接API的方法
2014/11/08 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
关于php支持的协议与封装协议总结(推荐)
2017/11/17 PHP
javascript 得到变量类型的函数
2010/05/19 Javascript
分享一个原生的JavaScript拖动方法
2016/09/25 Javascript
JS实现页面打印功能
2017/03/16 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
[02:02:38]VG vs Mineski Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
理解Python中函数的参数
2015/04/27 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python实现多人聊天室
2020/03/31 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
python实现浪漫的烟花秀
2019/01/30 Python
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
实习老师个人总结的自我评价
2013/09/28 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
探亲邀请信范文
2014/01/30 职场文书
村党支部换届选举方案
2014/05/02 职场文书
见习报告的格式
2014/10/31 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
Spring Boot 实现 WebSocket
2022/04/30 Java/Android