Bootstrap 按鈕

wmsok發表於2016-02-18
boot

本章將通過例項講解如何使用 Bootstrap 按鈕。任何帶有 class .btn 的元素都會繼承圓角灰色按鈕的預設外觀。但是 Bootstrap 提供了一些選項來定義按鈕的樣式，具體如下表所示：

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

類 描述 例項
.btn 為按鈕新增基本樣式 嘗試一下
.btn-default 預設/標準按鈕 嘗試一下
.btn-primary 原始按鈕樣式（未被操作） 嘗試一下
.btn-success 表示成功的動作 嘗試一下
.btn-info 該樣式可用於要彈出資訊的按鈕 嘗試一下
.btn-warning 表示需要謹慎操作的按鈕 嘗試一下
.btn-danger 表示一個危險動作的按鈕操作 嘗試一下
.btn-link 讓按鈕看起來像個連結 (仍然保留按鈕行為) 嘗試一下
.btn-lg 製作一個大按鈕 嘗試一下
.btn-sm 製作一個小按鈕 嘗試一下
.btn-xs 製作一個超小按鈕 嘗試一下
.btn-block 塊級按鈕(拉伸至父元素100%的寬度) 嘗試一下
.active 按鈕被點選 嘗試一下
.disabled 禁用按鈕 嘗試一下

下面的例項演示了上面所有的按鈕 class： 

<!DOCTYPE html> <html> <head> <title>Bootstrap 例項 - 按鈕選項</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <!-- 標準的按鈕 --> <button type="button" class="btn btn-default">預設按鈕</button> <!-- 提供額外的視覺效果，標識一組按鈕中的原始動作 --> <button type="button" class="btn btn-primary">原始按鈕</button> <!-- 表示一個成功的或積極的動作 --> <button type="button" class="btn btn-success">成功按鈕</button> <!-- 資訊警告訊息的上下文按鈕 --> <button type="button" class="btn btn-info">資訊按鈕</button> <!-- 表示應謹慎採取的動作 --> <button type="button" class="btn btn-warning">警告按鈕</button> <!-- 表示一個危險的或潛在的負面動作 --> <button type="button" class="btn btn-danger">危險按鈕</button> <!-- 並不強調是一個按鈕，看起來像一個連結，但同時保持按鈕的行為 --> <button type="button" class="btn btn-link">連結按鈕</button> </body> </html>

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/25960404/viewspace-1990753/，如需轉載，請註明出處，否則將追究法律責任。

相關文章