威尼斯wns.9778官网 > 计算机教程 > Bootstrap 3 按钮标签实例代码【威尼斯wns.9778官网】

原标题:Bootstrap 3 按钮标签实例代码【威尼斯wns.9778官网】

浏览次数:153 时间:2019-08-16

高度推荐使用 <button>

链接元素
可以为<a>添加.active class。

<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>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

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

 <a class="btn btn-default" href="#" 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 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 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-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

可以把鼠标放在按钮上点击查看效果。
跨浏览器的兼容性

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

威尼斯wns.9778官网 1

<!-- 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>
<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>

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

威尼斯wns.9778官网 2 

<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">

活动状态
当按钮处于活动状态时,其表现为被按压下(底色更深,边框夜色更深,内置阴影)。对于B<button>元素,是通过:active实现的。对于<a>元素,是通过.active实现的。然而,你还可以联合使用.active <button>并通过编程的方式使其处于活动状态。
按钮元素
由于:active是伪状态,因此 无需添加,但是在需要表现出同样外观的时候可以添加.active。

尺寸

可做按钮使用的Html标签  可以为<a>、<button>或<input>元素添加按钮class。

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

这是和上面的按钮做一个对比。
我们把.disabled作为工具class使用,就像.active class一样,因此不需要增加前缀。
 链接功能不受影响

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

禁用状态  通过将按钮的背景色做50%的褪色处理就可以呈现出无法点击的效果。
按钮元素 为<button>添加disabled属性。

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

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

激活状态

尺寸
 需要让按钮具有不同尺寸吗?使用.btn-lg、.btn-sm、.btn-xs可以获得不同尺寸的按钮。

禁用状态

威尼斯wns.9778官网 3

选项

通过给按钮添加.btn-block可以使其充满父节点100%的宽度,而且按钮也变为了块级(block)元素。

IE9以下无法兼容

如果为<button>添加disabled属性,Internet Explorer 9及更低版本的浏览器将会把按钮中的文本绘制为灰色,并带有恶心的阴影,目前还没有办法解决。
链接元素
为<a>添加.disabled class。

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

威尼斯wns.9778官网 4

本文由威尼斯wns.9778官网发布于计算机教程,转载请注明出处:Bootstrap 3 按钮标签实例代码【威尼斯wns.9778官网】

关键词:

上一篇:PHP 使用header函数设置HTTP头的示例解析 表头

下一篇:没有了