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)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號