Link
当前位置:首页 > 日记 > 正文

Bootstrap 3 按钮标签实例代码

Bootstrap 3 按钮标签实例代码

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

通过将按钮类添加到 <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 按钮标签实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关文章

微信小程序 <swiper-item>标签传入

微信小程序 <swiper-item>标签传入

数据,标签,程序,电脑软件,lt,微信小程序 <swiper-item>标签传入数据在<swiper-item>中用for循环传入多个成对不同数据时的实现方法。看下效果图:遍历实现方法:wxss省略:wxml中代码:<!--导航部分轮播图--><swiper class="navban" indicator-do…

Word中表格内容全部居中的操作技巧

Word中表格内容全部居中的操作技巧

操作技巧,表格,内容,操作步骤,电脑软件,  编辑文档的时候有时需要插入表格,表格的文字常常会设置成居中。能不能将所有的表格一齐设置好呢?该如何操作呢?今天,小编就教大家在Word中表格内容全部居中的操作技巧。Word中表格内容全部居中的操…

浅谈Angular4中常用管道

浅谈Angular4中常用管道

浅谈,常用,电脑软件,通常我们需要使用管道实现对数据的格式化,Angular4中的管道和之前有了一些变化,下面说一些常用的管道。一、大小写转换管道 uppercase将字符串转换为大写 lowercase将字符串转换为小写<p>将字符串转换为大写{{str | upp…

微信小程序 下拉菜单的实现

微信小程序 下拉菜单的实现

下拉菜单,程序,电脑软件,微信小,微信小程序 下拉菜单看下实现效果图:实例://wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; flo…

excel2013如何快速选中复制筛选出

excel2013如何快速选中复制筛选出

数据,筛选,方法,复制粘贴,快速,  我们在使用excel进行数据筛选的时候,我们对于筛选出来的数据要把它复制到另外一个表格中,对于数据少的时候我们可以通过托拽的形式进行选择,但是对于数据比较多的情况下,我们如何快速进行选择复制呢,今天小编…

详解Vue中添加过渡效果

详解Vue中添加过渡效果

过渡效果,详解,电脑软件,Vue,最近在学习Vue这个框架,发现新的版本中,官网的文档里面说的过渡效果,如果直接粘贴官方的例子中的代码,发现并没有过渡的效果,经过反复测试之后终于知道怎么搞了,把测试的过程总结一下,以便以后回顾。贴上成功的代码:htm…

JavaScript数组去重的多种方法 |

JavaScript数组去重的多种方法 |

方法,数组去重,四种,多种,电脑软件,数组去重,一般需求是给你一个数组,调用去重方法,返回数值副本,副本中没有重复元素。一般来说,两个元素通过 === 比较返回 true 的视为相同元素,需要去重,所以,1 和 "1" 是不同的元素,1 和 new Number(1) 是不同…

bootstrap组件之按钮式下拉菜单小

bootstrap组件之按钮式下拉菜单小

下拉菜单,组件,按钮,电脑软件,bootstrap,1、单按钮下拉菜单基础的下拉菜单最外层是.dropdown的div现在只需要改成.btnd-group的div就可以实现单按钮的下拉菜单<div class="btn-group"> <button type="button" class="btn btn-default…

将angular-ui的分页组件封装成指令

将angular-ui的分页组件封装成指令

分页,组件,方法,封装,详解,准备工作:(1)一如既往的我还是使用了requireJS进行js代码的编译(2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css....首先抛出几个问题:a):何时回用到分页 (当后端返回的数据过多,一页装不满时,我们必…

如何运用Excel来制作付款单

如何运用Excel来制作付款单

付款,电脑软件,Excel,  付款凭单,是一种授权付款的凭证,如果公司需要制作付款凭单,那么应该怎么利用Excel表格来完成呢?以下是小编为您带来的关于Excel制作付款单,希望对您有所帮助。Excel制作付款单1、选中第一行的前八个单元格,开始-对齐方…

excel2010无法合并单元格的解决方

excel2010无法合并单元格的解决方

合并单元格,解决方法,电脑软件,strong,  Excel中遇到单元格无法合并的问题该如何解决呢?下面是小编带来的关于excel2010无法合并单元格的解决方法,希望阅读过后对你有所启发!excel2010无法合并单元格的解决方法无法合并单元格步骤1:打开exc…

powerpoint无法放映下一页怎么办

powerpoint无法放映下一页怎么办

处理方法,下一页,幻灯片,不能播放,电脑软件,  制作完幻灯片在播放时出现问题,不能播放下一页幻灯片,遇到这种奇怪的问题该怎么办呢?有解决的方法吧?下面小编马上就告诉大家ppt不能播放下一页幻灯片的处理方法,希望看完本教程的朋友都能学会…