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操作checkbox示例分享
Jul 21 Javascript
js+html5实现canvas绘制椭圆形图案的方法
May 21 Javascript
全面总结Javascript对数组对象的各种操作
Jan 22 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
微信分享调用jssdk实例
Jun 08 Javascript
vue项目中axios使用详解
Feb 07 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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
文章推荐系统(二)
2006/10/09 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
js实现星星打分效果
2020/07/05 Javascript
利用Python为iOS10生成图标和截屏
2016/09/24 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
python实现统计代码行数的小工具
2019/09/19 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python设置环境变量的作用整理
2020/02/17 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
日本化妆品植村秀俄罗斯官方网站:Shu Uemura俄罗斯
2020/02/01 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
小学生安全保证书
2014/02/01 职场文书
购房意向书范本
2014/04/01 职场文书
寄语是什么意思
2014/04/10 职场文书
读书小明星事迹材料
2014/05/03 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
2014年六五普法工作总结
2014/11/25 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
卡特教练观后感
2015/06/08 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android