快捷導(dǎo)航

Bootstrap 3 按鈕標(biāo)簽實(shí)例代碼

更新時(shí)間：2017年02月21日 17:02:37 作者：qq1214379009

這篇文章主要介紹了Bootstrap 3 按鈕標(biāo)簽實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

本文給大家介紹按鈕標(biāo)簽的實(shí)例代碼，具體內(nèi)容如下：

通過(guò)將按鈕類添加到 <a>, <button>, <input> 來(lái)實(shí)現(xiàn)按鈕樣式

<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> 適用于導(dǎo)航條以及導(dǎo)航條控件

如果 <a> 被作為按鈕使用而不是鏈接, 請(qǐng)注意添加 role="button"

高度推薦使用 <button>

選項(xiàng)

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

尺寸

通過(guò)添加 .btn-lg , .btn-sm , .btn-xs 來(lái)實(shí)現(xiàn)尺寸

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

通過(guò)添加 .btn-block 來(lái)實(shí)現(xiàn)塊級(jí)按鈕

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

激活狀態(tài)

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

禁用狀態(tài)

IE9以下無(wú)法兼容

<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 按鈕標(biāo)簽實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: