閱讀(8.7k) 書簽贊(3) 我要糾錯

Bootstrap 按鈕

2018-03-03 16:33 更新

我們可以在Bootstrap中輕松創(chuàng)建一個按鈕，通過添加 btn 類將a，button或input元素轉(zhuǎn)換為Bootstrap中的花式粗體按鈕。

<a href="#" class="btn btn-primary">Click Here</a>


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style="margin:30px">
     <a href="#" class="btn btn-primary">Click Here</a>
  </body>
</html>

上面的代碼呈現(xiàn)如下：

顏色代碼

按鈕有各種顏色選項(xiàng)：

btn-default為白色
btn-primary為深藍(lán)色
btn-success為綠色
btn-info為淺藍(lán)色
btn-warning為橙色
btn-danger為紅色

下表列出了Bootstrap中可用的不同按鈕：

類	描述
`btn btn-default`	帶漸變的默認(rèn)灰色按鈕。
`btn btn-primary`	在一組按鈕中的主動作按鈕。
`btn btn-info`	替代默認(rèn)按鈕。
`btn btn-success`	成功或正確的行動。
`btn btn-warning`	表明此操作應(yīng)注意。
`btn btn-danger`	表示危險(xiǎn)或潛在的負(fù)面行為。
`btn btn-link`	使按鈕看起來像一個鏈接。

各種尺寸：

btn-lg用于大按鈕
btn-sm用于小按鈕
btn-xs用于超小的按鈕

還有一些輔助類的按鈕可用：

btn-block將使按鈕跨越整個網(wǎng)格
active將使按鈕看起來像它當(dāng)前點(diǎn)擊
disabled將使按鈕無法單擊并顯示漸變色。

以下示例將顯示這些按鈕的操作。

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</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">Link</button>
<hr>
<input type="button" class="btn btn-default" value="Default">
<input type="button" class="btn btn-primary" value="Primary">
<input type="button" class="btn btn-info" value="Info">
<input type="button" class="btn btn-success" value="Success">
<input type="button" class="btn btn-warning" value="Warning">
<input type="button" class="btn btn-danger" value="Danger">
<input type="button" class="btn btn-link" value="Link">
<hr>
<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-link">Link</a>


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-success">Success</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">Link</button>
  <hr>
    <input type="button" class="btn btn-default" value="Default">
    <input type="button" class="btn btn-primary" value="Primary">
    <input type="button" class="btn btn-info" value="Info">
    <input type="button" class="btn btn-success" value="Success">
    <input type="button" class="btn btn-warning" value="Warning">
    <input type="button" class="btn btn-danger" value="Danger">
    <input type="button" class="btn btn-link" value="Link">
    <hr>
    <a href="#" class="btn btn-default">Default</a>
    <a href="#" class="btn btn-primary">Primary</a>
    <a href="#" class="btn btn-info">Info</a>
    <a href="#" class="btn btn-success">Success</a>
    <a href="#" class="btn btn-warning">Warning</a>
    <a href="#" class="btn btn-danger">Danger</a>
    <a href="#" class="btn btn-link">Link</a>
</div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

按鈕大小

我們可以通過添加額外的類.btn-lg，.btn-sm或.btn-xs來更改按鈕大小。

    <button type="button" class="btn btn-default btn-lg">Default</button>
    <button type="button" class="btn btn-primary btn-lg">Primary</button>
    <button type="button" class="btn btn-info btn-lg">Info</button>
    <button type="button" class="btn btn-success btn-lg">Success</button>
    <button type="button" class="btn btn-warning btn-lg">Warning</button>
    <button type="button" class="btn btn-danger btn-lg">Danger</button>
    <hr>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <hr> 
    <button type="button" class="btn btn-default btn-sm">Default</button>
    <button type="button" class="btn btn-primary btn-sm">Primary</button>
    <button type="button" class="btn btn-info btn-sm">Info</button>
    <button type="button" class="btn btn-success btn-sm">Success</button>
    <button type="button" class="btn btn-warning btn-sm">Warning</button>
    <button type="button" class="btn btn-danger btn-sm">Danger</button>
    <hr>
    <button type="button" class="btn btn-default btn-xs">Default</button>
    <button type="button" class="btn btn-primary btn-xs">Primary</button>
    <button type="button" class="btn btn-info btn-xs">Info</button>
    <button type="button" class="btn btn-success btn-xs">Success</button>
    <button type="button" class="btn btn-warning btn-xs">Warning</button>
    <button type="button" class="btn btn-danger btn-xs">Danger</button>


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-default btn-lg">Default</button>
    <button type="button" class="btn btn-primary btn-lg">Primary</button>
    <button type="button" class="btn btn-info btn-lg">Info</button>
    <button type="button" class="btn btn-success btn-lg">Success</button>
    <button type="button" class="btn btn-warning btn-lg">Warning</button>
    <button type="button" class="btn btn-danger btn-lg">Danger</button>
    <hr>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <hr> 
    <button type="button" class="btn btn-default btn-sm">Default</button>
    <button type="button" class="btn btn-primary btn-sm">Primary</button>
    <button type="button" class="btn btn-info btn-sm">Info</button>
    <button type="button" class="btn btn-success btn-sm">Success</button>
    <button type="button" class="btn btn-warning btn-sm">Warning</button>
    <button type="button" class="btn btn-danger btn-sm">Danger</button>
    <hr>
    <button type="button" class="btn btn-default btn-xs">Default</button>
    <button type="button" class="btn btn-primary btn-xs">Primary</button>
    <button type="button" class="btn btn-info btn-xs">Info</button>
    <button type="button" class="btn btn-success btn-xs">Success</button>
    <button type="button" class="btn btn-warning btn-xs">Warning</button>
    <button type="button" class="btn btn-danger btn-xs">Danger</button>
</div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

按鈕大小按鈕大小2

按鈕狀態(tài)

Bootstrap按鈕有兩種狀態(tài)：活動和非活動。

活動狀態(tài)具有一個稱為 active 的類，但是沒有用于非活動狀態(tài)的類。

我們可以創(chuàng)建一個簡單的按鈕，使用以下標(biāo)記在這兩個狀態(tài)之間切換：

    <button type="button" 
            class="btn btn-lg btn-default" 
            data-toggle="button">Toggle Me!</button>


<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
</script>  
</head>
  <body style="margin:30px">
    <button type="button" 
            class="btn btn-lg btn-default" 
            data-toggle="button">Toggle Me!</button>
  </body>
</html>

上面的代碼呈現(xiàn)如下：

按鈕狀態(tài)

全寬按鈕

我們可以創(chuàng)建塊級別按鈕，通過添加額外的類.btn-block來覆蓋父元素的全部寬度。

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


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <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>
</div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

全寬按鈕

禁用按鈕

通過<a>標(biāo)簽可以通過添加類.disabled來禁用。

.disabled 類只會更改鏈接的可視外觀，除非你刪除“href”屬性，否則鏈接將保持可點(diǎn)擊。

    <a href="#" class="btn btn-default btn-lg disabled">Default</a>
    <a href="#" class="btn btn-primary btn-lg disabled">Primary</a>
    <a href="#" class="btn btn-info btn-lg disabled">Info</a>
    <a href="#" class="btn btn-success btn-lg disabled">Success</a>
    <a href="#" class="btn btn-warning btn-lg disabled">Warning</a>
    <a href="#" class="btn btn-danger btn-lg disabled">Danger</a>


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <a href="#" class="btn btn-default btn-lg disabled">Default</a>
    <a href="#" class="btn btn-primary btn-lg disabled">Primary</a>
    <a href="#" class="btn btn-info btn-lg disabled">Info</a>
    <a href="#" class="btn btn-success btn-lg disabled">Success</a>
    <a href="#" class="btn btn-warning btn-lg disabled">Warning</a>
    <a href="#" class="btn btn-danger btn-lg disabled">Danger</a>
</div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

禁用按鈕

使用按鈕和input元素創(chuàng)建禁用按鈕

可以通過添加“disabled”屬性來禁用由<button>或<input>標(biāo)簽創(chuàng)建的按鈕。

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


<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-default btn-lg" disabled="disabled">Default</button>
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Primary</button>
    <button type="button" class="btn btn-info btn-lg" disabled="disabled">Info</button>
    <button type="button" class="btn btn-success btn-lg" disabled="disabled">Success</button>
    <button type="button" class="btn btn-warning btn-lg" disabled="disabled">Warning</button>
    <button type="button" class="btn btn-danger btn-lg" disabled="disabled">Danger</button>
</div>
</body>
</html>

上面的代碼呈現(xiàn)如下：

使用按鈕和input元素創(chuàng)建禁用按鈕

有狀態(tài)按鈕

我們可以通過簡單地將數(shù)據(jù)屬性data-loading-text =“Loading ...”添加到按鈕來將按鈕的正常狀態(tài)更改為加載狀態(tài)。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">  
$(function() { 
    $(".btn").click(function(){
        $(this).button("loading").delay(1000).queue(function() {
            $(this).button("reset");
            $(this).dequeue();
        });        
    });
});   
</script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-default" data-loading-text="Loading ...">Default</button>
    <button type="button" class="btn btn-primary" data-loading-text="Loading...">Primary</button>
    <button type="button" class="btn btn-info" data-loading-text="Loading...">Info</button>
    <button type="button" class="btn btn-success" data-loading-text="Loading...">Success</button>
    <button type="button" class="btn btn-warning" data-loading-text="Loading...">Warning</button>
    <button type="button" class="btn btn-danger" data-loading-text="Loading...">Danger</button>
    <button type="button" class="btn btn-link" data-loading-text="Loading...">Link</button>
</div>
</body>
</html>

注意

在代碼中，我們使用 btn ， btn-lg和 btn-default類創(chuàng)建了一個大的灰色按鈕。

它當(dāng)前處于非活動狀態(tài)。當(dāng)用戶點(diǎn)擊它時(shí)，Bootstrap將給按鈕添加一個額外的活動類。

帶有值按鈕的data-toggle屬性有助于實(shí)現(xiàn)這種切換功能。

以上內(nèi)容是否對您有幫助：

← Bootstrap 實(shí)用類

Bootstrap 按鈕下拉菜單 →

寫筆記

我要補(bǔ)充

Bootstrap 按鈕

按鈕大小

按鈕狀態(tài)

全寬按鈕

禁用按鈕

使用按鈕和input元素創(chuàng)建禁用按鈕

有狀態(tài)按鈕

注意

推薦文章

推薦教程

推薦課程