本文主要講解的是按鈕的樣式。

1.選項(xiàng)

2.尺寸

3.活動(dòng)狀態(tài)

4.禁用狀態(tài)

5.可做按鈕使用的Html標(biāo)簽

6.總結(jié)

選項(xiàng)

使用上面列出的class可以快速創(chuàng)建一個(gè)帶有樣式的按鈕。

復(fù)制代碼
代碼如下:

        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-link">鏈接</button>

尺寸

需要讓按鈕具有不同尺寸嗎？使用.btn-lg、.btn-sm、.btn-xs可以獲得不同尺寸的按鈕。

復(fù)制代碼
代碼如下:

<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可以使其充滿父節(jié)點(diǎn)100%的寬度，而且按鈕也變?yōu)榱藟K級(jí)（block）元素。

復(fù)制代碼
代碼如下:

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

活動(dòng)狀態(tài)

當(dāng)按鈕處于活動(dòng)狀態(tài)時(shí)，其表現(xiàn)為被按壓下（底色更深，邊框夜色更深，內(nèi)置陰影）。對(duì)于B<button>元素，是通過(guò):active實(shí)現(xiàn)的。對(duì)于<a>元素，是通過(guò).active實(shí)現(xiàn)的。然而，你還可以聯(lián)合使用.active<button>并通過(guò)編程的方式使其處于活動(dòng)狀態(tài)。

由于:active是偽狀態(tài)，因此 無(wú)需添加，但是在需要表現(xiàn)出同樣外觀的時(shí)候可以添加.active。

復(fù)制代碼
代碼如下:

<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>添加.activeclass。

復(fù)制代碼
代碼如下:

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

可以和上面的button進(jìn)行一下對(duì)比。

禁用狀態(tài)

通過(guò)將按鈕的背景色做50%的褪色處理就可以呈現(xiàn)出無(wú)法點(diǎn)擊的效果。

為<button>添加disabled屬性。

復(fù)制代碼
代碼如下:

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

可以把鼠標(biāo)放在按鈕上點(diǎn)擊查看效果。

跨瀏覽器的兼容性

如果為<button>添加disabled屬性，Internet Explorer 9及更低版本的瀏覽器將會(huì)把按鈕中的文本繪制為灰色，并帶有惡心的陰影，目前還沒(méi)有辦法解決。

為<a>添加.disabledclass。

復(fù)制代碼
代碼如下:

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

這是和上面的按鈕做一個(gè)對(duì)比。

我們把.disabled作為工具class使用，就像.activeclass一樣，因此不需要增加前綴。

鏈接功能不受影響

上面提到的class只是改變<a>的外觀，不影響功能。在此文檔中，我們通過(guò)JavaScript代碼禁用了鏈接的默認(rèn)功能。

Context-specific usage

While button classes can be used on<a>and<button>elements, only<button>elements are supported within our nav and navbar components.

可做按鈕使用的Html標(biāo)簽

可以為<a>、<button>或<input>元素添加按鈕class。

復(fù)制代碼
代碼如下:

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

跨瀏覽器表現(xiàn)

作為最佳實(shí)踐，我們強(qiáng)烈建議盡可能使用<button>元素以確保跨瀏覽器的一致性樣式。

出去其它原因，這個(gè)Firefox的bug讓我們無(wú)法為基于<input>標(biāo)簽的按鈕設(shè)置line-height，這導(dǎo)致在Firefox上，他們與其它按鈕的高度不一致。

總結(jié)

本節(jié)主要講解的內(nèi)容是button按鈕的樣式。主要是靈活的運(yùn)行這幾個(gè)樣式進(jìn)行控制就可以了。

最新評(píng)論