Bootstrap 3 按钮标签实例代码

2024-02-29 03:51:03 43

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

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

<aclass="btnbtn-default"href="#"rel="externalnofollow"role="button">Link</a>
<buttonclass="btnbtn-default"type="submit">Button</button>
<inputclass="btnbtn-default"type="button"value="Input">
<inputclass="btnbtn-default"type="submit"value="Submit">

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

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

高度推荐使用<button>

选项

<!--Standardbutton-->
<buttontype="button"class="btnbtn-default">Default</button>
<!--Providesextravisualweightandidentifiestheprimaryactioninasetofbuttons-->
<buttontype="button"class="btnbtn-primary">Primary</button>
<!--Indicatesasuccessfulorpositiveaction-->
<buttontype="button"class="btnbtn-success">Success</button>
<!--Contextualbuttonforinformationalalertmessages-->
<buttontype="button"class="btnbtn-info">Info</button>
<!--Indicatescautionshouldbetakenwiththisaction-->
<buttontype="button"class="btnbtn-warning">Warning</button>
<!--Indicatesadangerousorpotentiallynegativeaction-->
<buttontype="button"class="btnbtn-danger">Danger</button>
<!--Deemphasizeabuttonbymakingitlooklikealinkwhilemaintainingbuttonbehavior-->
<buttontype="button"class="btnbtn-link">Link</button>

尺寸

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

<p>
<buttontype="button"class="btnbtn-primarybtn-lg">Largebutton</button>
<buttontype="button"class="btnbtn-defaultbtn-lg">Largebutton</button>
</p>
<p>
<buttontype="button"class="btnbtn-primary">Defaultbutton</button>
<buttontype="button"class="btnbtn-default">Defaultbutton</button>
</p>
<p>
<buttontype="button"class="btnbtn-primarybtn-sm">Smallbutton</button>
<buttontype="button"class="btnbtn-defaultbtn-sm">Smallbutton</button>
</p>
<p>
<buttontype="button"class="btnbtn-primarybtn-xs">Extrasmallbutton</button>
<buttontype="button"class="btnbtn-defaultbtn-xs">Extrasmallbutton</button>
</p>

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

<buttontype="button"class="btnbtn-primarybtn-lgbtn-block">Blocklevelbutton</button>
<buttontype="button"class="btnbtn-defaultbtn-lgbtn-block">Blocklevelbutton</button>

激活状态

<buttontype="button"class="btnbtn-primarybtn-lgactive">Primarybutton</button>
<buttontype="button"class="btnbtn-defaultbtn-lgactive">Button</button>

禁用状态

IE9以下无法兼容

<buttontype="button"class="btnbtn-lgbtn-primary"disabled="disabled">Primarybutton</button>
<buttontype="button"class="btnbtn-defaultbtn-lg"disabled="disabled">Button</button>

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

Bootstrap 3 按钮标签实例代码

热门推荐

随机推荐