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 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
jquery eval解析JSON中的注意点介绍
Aug 23 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
js 操作符汇总
Nov 08 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
索趣科技的答案
2007/02/07 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
Vue CLI3 如何支持less的方法示例
2018/08/29 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
python用字典统计单词或汉字词个数示例
2014/04/22 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
详解Django中的form库的使用
2015/07/18 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
Python对excel文档的操作方法详解
2018/12/10 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
Python3离线安装Requests模块问题
2019/10/13 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
医学院毕业生自荐信范文
2014/03/06 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
孝女彩金观后感
2015/06/10 职场文书