怎樣使用Bootstrap按鈕-創(chuàng)新互聯(lián)

小編給大家分享一下怎樣使用Bootstrap按鈕，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的做網(wǎng)站、網(wǎng)站建設(shè)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。10年品質(zhì)，值得信賴！

Bootstrap 按鈕

如何使用 Bootstrap 按鈕。任何帶有 class .btn 的元素都會(huì)繼承圓角灰色按鈕的默認(rèn)外觀。但是 Bootstrap 提供了一些選項(xiàng)來(lái)定義按鈕的樣式，具體如下表所示：

以下樣式可用于<a>, <button>, 或 <input> 元素上：

下面的實(shí)例演示了上面所有的按鈕 class：

<!-- 標(biāo)準(zhǔn)的按鈕 -->
<button type="button" class="btn btn-default">默認(rèn)按鈕</button>
<!-- 提供額外的視覺(jué)效果，標(biāo)識(shí)一組按鈕中的原始動(dòng)作 -->
<button type="button" class="btn btn-primary">原始按鈕</button>
<!-- 表示一個(gè)成功的或積極的動(dòng)作 -->
<button type="button" class="btn btn-success">成功按鈕</button>
<!-- 信息警告消息的上下文按鈕 -->
<button type="button" class="btn btn-info">信息按鈕</button>
<!-- 表示應(yīng)謹(jǐn)慎采取的動(dòng)作 -->
<button type="button" class="btn btn-warning">警告按鈕</button>
<!-- 表示一個(gè)危險(xiǎn)的或潛在的負(fù)面動(dòng)作 -->
<button type="button" class="btn btn-danger">危險(xiǎn)按鈕</button>
<!-- 并不強(qiáng)調(diào)是一個(gè)按鈕，看起來(lái)像一個(gè)鏈接，但同時(shí)保持按鈕的行為 -->
<button type="button" class="btn btn-link">鏈接按鈕</button>

效果

按鈕大小

下表列出了獲得各種大小按鈕的 class：

<p>
 <button type="button" class="btn btn-primary btn-lg">大的原始按鈕</button>
 <button type="button" class="btn btn-default btn-lg">大的按鈕</button>
</p>
<p>
 <button type="button" class="btn btn-primary">默認(rèn)大小的原始按鈕</button>
 <button type="button" class="btn btn-default">默認(rèn)大小的按鈕</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">小的原始按鈕</button>
 <button type="button" class="btn btn-default btn-sm">小的按鈕</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">特別小的原始按鈕</button>
 <button type="button" class="btn btn-default btn-xs">特別小的按鈕</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg btn-block">塊級(jí)的原始按鈕</button>
 <button type="button" class="btn btn-default btn-lg btn-block">塊級(jí)的按鈕</button>
</p>

效果

按鈕狀態(tài)

Bootstrap 提供了激活、禁用等按鈕狀態(tài)的 class，下面將進(jìn)行詳細(xì)講解。

激活狀態(tài)

按鈕在激活時(shí)將呈現(xiàn)為被按壓的外觀（深色的背景、深色的邊框、陰影）。

下表列出了讓按鈕元素和錨元素呈激活狀態(tài)的 class：

<p>
 <button type="button" class="btn btn-default btn-lg ">默認(rèn)按鈕</button>
 <button type="button" class="btn btn-default btn-lg active">激活按鈕</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg ">原始按鈕</button>
 <button type="button" class="btn btn-primary btn-lg active">激活的原始按鈕</button>
</p>

禁用狀態(tài)

當(dāng)您禁用一個(gè)按鈕時(shí)，它的顏色會(huì)變淡 50%，并失去漸變。

下表列出了讓按鈕元素和錨元素呈禁用狀態(tài)的 class：

下面的實(shí)例演示了這點(diǎn)：

<p>
 <button type="button" class="btn btn-default btn-lg">默認(rèn)按鈕</button>
 <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按鈕</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-lg ">原始按鈕</button>
 <button type="button" class="btn btn-primary btn-lg" disabled="disabled">禁用的原始按鈕</button>
</p>
<p>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default btn-lg" role="button">鏈接</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-default btn-lg disabled" role="button">禁用鏈接</a>
</p>
<p>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary btn-lg" role="button">原始鏈接</a>
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary btn-lg disabled" role="button">禁用的原始鏈接</a>
</p>

效果

按鈕標(biāo)簽

您可以在 <a>、<button> 或 <input> 元素上使用按鈕 class。但是建議您在 <button> 元素上使用按鈕 class，避免跨瀏覽器的不一致性問(wèn)題。

下面的實(shí)例演示了這點(diǎn)：

<a class="btn btn-default" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" role="button">鏈接</a>
<button class="btn btn-default" type="submit">按鈕</button>
<input class="btn btn-default" type="button" value="輸入">
<input class="btn btn-default" type="submit" value="提交">

看完了這篇文章，相信你對(duì)“怎樣使用Bootstrap按鈕”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站標(biāo)題：怎樣使用Bootstrap按鈕-創(chuàng)新互聯(lián)
當(dāng)前地址：http://muchs.cn/article12/djjogc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、App開(kāi)發(fā)、小程序開(kāi)發(fā)、全網(wǎng)營(yíng)銷推廣、用戶體驗(yàn)、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)