Bootstrap 按钮（实例 ）
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap 按钮（实例 ）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
任何帶有 class .btn 的元素都會(huì)繼承圓角灰色按鈕的默認(rèn)外觀。但是 Bootstrap 提供了一些選項(xiàng)來(lái)定義按鈕的樣式，具體如下表所示：
下面的實(shí)例演示了上面所有的按鈕 class：
<pre class="prettyprint tryit"><!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 按鈕選項(xiàng)</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><!-- 標(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></body> </html>按鈕大小
下表列出了獲得各種大小按鈕的 class：
下面的實(shí)例演示了上面所有的按鈕 class：
<pre class="prettyprint tryit"><!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 按鈕大小</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><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></body> </html>按鈕狀態(tài)
Bootstrap 提供了激活、禁用等按鈕狀態(tài)的 class，下面將進(jìn)行詳細(xì)講解。
激活狀態(tài)
按鈕在激活時(shí)將呈現(xiàn)為被按壓的外觀（深色的背景、深色的邊框、陰影）。
下表列出了讓按鈕元素和錨元素呈激活狀態(tài)的 class：
下面的實(shí)例演示了這點(diǎn)：
<pre class="prettyprint tryit"><!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 按鈕激活狀態(tài)</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><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></body> </html>禁用狀態(tài)
當(dāng)您禁用一個(gè)按鈕時(shí)，它的顏色會(huì)變淡 50%，并失去漸變。
下表列出了讓按鈕元素和錨元素呈禁用狀態(tài)的 class：
下面的實(shí)例演示了這點(diǎn)：
<pre class="prettyprint tryit"><!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 按鈕禁用狀態(tài)</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><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="#" class="btn btn-default btn-lg" role="button">鏈接</a><a href="#" class="btn btn-default btn-lg disabled" role="button">禁用鏈接</a> </p> <p><a href="#" class="btn btn-primary btn-lg" role="button">原始鏈接</a><a href="#" class="btn btn-primary btn-lg disabled" role="button">禁用的原始鏈接</a> </p></body> </html>按鈕標(biāo)簽
您可以在 、 或 元素上使用按鈕 class。但是建議您在 元素上使用按鈕 class，避免跨瀏覽器的不一致性問(wèn)題。
下面的實(shí)例演示了這點(diǎn)：
<pre class="prettyprint tryit"><!DOCTYPE html> <html> <head><title>Bootstrap 實(shí)例 - 按鈕標(biāo)簽</title><link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"><script src="/scripts/jquery.min.js"></script><script src="/bootstrap/js/bootstrap.min.js"></script> </head> <body><a class="btn btn-default" href="#" 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="提交"></body> </html>總結(jié)
以上是生活随笔為你收集整理的Bootstrap 按钮（实例 ）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 计算机操作系统|汤小丹|第四版|习题答案
- 下一篇： GPGPU,一个不错的开源工程 vort