我們先從最常見也最易學的按鈕開始，選用的是「docs->examples->theme」模板（主題模板），用瀏覽器開啟可見：
其實這張圖已經告訴我們不同樣式的按鈕使用方法了，稍後就能看到。
用dw開啟index.html，因為theme示例中包含了按鈕、**、縮圖、標籤、角標等等的樣式，所以**還是挺長的，為了專注學習一下按鈕的使用，我們只保留最核心的部分，精簡為：
charset=utf-8>
theme template for bootstraptitle>
href="../../dist/css/bootstrap.min.css"
rel="stylesheet">
href="../../dist/css/bootstrap-theme.min.css"
rel="stylesheet">
head>
role="document">
class="page-header">
div>
type="button"
class="btn btn-lg btn-default">defaultbutton>
type="button"
class="btn btn-lg btn-primary">primarybutton>
type="button"
class="btn btn-lg btn-success">successbutton>
type="button"
class="btn btn-lg btn-info">infobutton>
type="button"
class="btn btn-lg btn-warning">warningbutton>
type="button"
class="btn btn-lg btn-danger">dangerbutton>
type="button"
class="btn btn-lg btn-link">linkbutton>
p>
type="button"
class="btn btn-default">defaultbutton>
type="button"
class="btn btn-primary">primarybutton>
type="button"
class="btn btn-success">successbutton>
type="button"
class="btn btn-info">infobutton>
type="button"
class="btn btn-warning">warningbutton>
type="button"
class="btn btn-danger">dangerbutton>
type="button"
class="btn btn-link">linkbutton>
p>
type="button"
class="btn btn-sm btn-default">defaultbutton>
type="button"
class="btn btn-sm btn-primary">primarybutton>
type="button"
class="btn btn-sm btn-success">successbutton>
type="button"
class="btn btn-sm btn-info">infobutton>
type="button"
class="btn btn-sm btn-warning">warningbutton>
type="button"
class="btn btn-sm btn-danger">dangerbutton>
type="button"
class="btn btn-sm btn-link">linkbutton>
p>
type="button"
class="btn btn-xs btn-default">defaultbutton>
type="button"
class="btn btn-xs btn-primary">primarybutton>
type="button"
class="btn btn-xs btn-success">successbutton>
type="button"
class="btn btn-xs btn-info">infobutton>
type="button"
class="btn btn-xs btn-warning">warningbutton>
type="button"
class="btn btn-xs btn-danger">dangerbutton>
type="button"
class="btn btn-xs btn-link">linkbutton>
p>
body>
html>精簡後效果如下：
使用按鈕樣式，需要引用的樣式表包括bootstrap.min.css和bootstrap-theme.min.css。我們來看其中一句：
default
可見定義按鈕樣式，只需要將元素的class屬性設定為」btn btn-lg btn-default」，其中btn指示為按鈕；btn-lg（lg即large的縮寫，即大的按鈕，同理btn-sm，sm為small，即小按鈕）指示按鈕大小，不寫為預設大小；btn-default指示應用場合（顏色）。列表如下：
class
用途效果
btn指示按鈕
btn-lg
指示大小
大btn-sm
中btn-xs
小btn-default
指示用途
灰btn-primary
藍btn-success
綠btn-info
淺藍btn-warning
橙btn-danger
紅btn-link文字
舉個實用的例子，放置乙個鏈結到的藍色中等大小按鈕，在引入css檔案後，在合適的位置新增如下**即可：
實用的例子
效果如下：
下一節我們看一看bootstrap中的**樣式有哪些。
Bootstrap筆記 按鈕
確定要刪除嗎？修改內容 修改內容 修改內容 修改內容 btn 是按鈕樣式的基類，在新增其他樣式前，必須先新增btn btn primary btn default btn success btn warning btn danger active 啟用 設定按鈕大小 btn lg btn md bt...
bootstrap框架之按鈕
基礎用法 tyoe button class btn btn default button class btn group type button class btn btn default button div class btn group vertical type button class ...
Bootstrap系列 29 按鈕組
單個按鈕在web頁面中的運用有時候並不能滿足我們的業務需求，常常會看到將多個按鈕組合在一起使用，比如富文字編輯器裡的一組小圖示按鈕等 按鈕組和下拉列表元件一樣，需要依賴於button.js外掛程式才能正常執行。不過我們同樣可以直接只呼叫bootstrap.js檔案。因為這個檔案已整合了button....