Bootstrap 按鈕

摘要：這篇筆記主要是關於bootstrap提供的定義按鈕的不一樣樣式 。

1.按鈕樣式總結

如下樣式能夠用在<a>、<button>、<input>元素上。

由於：<a role="button"  href="#">、<input type="button">、<input type="submit">等表現出來的是按鈕的形狀

不過仍是建議在<button>元素上使用按鈕class，避免跨瀏覽器的不一致問題。

用法：<button class="btn btn-default">按鈕</button>

樣式示例：

<!-- 標準的按鈕 -->
<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>

結果：

1.1 按鈕大小

上表顯示，.btn-lg、.btn-sm、 .btn-xs、.btn-md(正常大小)、.btn-block是用來調整按鈕大小的類。

代碼示例：

<div class="container">
    <div>
        <button class="btn btn-danger btn-lg">btn-lg</button>
        <button class="btn btn-primary btn-md">btn-md</button>
        <button class="btn btn-info btn-sm">btn-sm</button>
        <button class="btn btn-success btn-xs">btn-xs</button>
        <button class="btn btn-warning btn-block">btn-block(與父元素同寬)</button>
    </div>
</div>

顯示以下：

1.2 按鈕狀態

　　bootstrap提供了按鈕激活、禁用等狀態的類。

　　按鈕處於激活狀態（active）時，其外觀會發生變化，呈現深色的背景、邊框和陰影，<a  href="#" class="btn btn-primary active" role="button">。

　　按鈕處於禁用狀態（disabled）時，按鈕顏色會變淡50%，並失去漸變，點擊時不會發生任何變化，<button class="btn btn-primary active">；

　　這兩種狀態都能用於按鈕元素<button>和錨元素<a>

注意！

　　與表單輸入框等禁用狀態不一樣，錨元素的禁止狀態是由類決定的，不是屬性。例如，<a href="#" class="btn btn-primary disabled" role="button">。；

　　按鈕元素的禁用狀態是由disabled屬性決定的。例如，。<button class="btn btn-primary" disabled="disabled">。

2.字體圖標（glyphicons）

字體圖標是在web項目中使用的圖標字體，bootstrap捆綁了200多種字體格式的字形。

2.1 用法

代碼：<span class="glyphicon glyphicon-search"></span>

字體圖標常常和按鈕元素搭配使用:

<button class="btn btn-primary"> <span class="glyphicon glyphicon-search"></span>搜索 </button> <button class="btn btn-primary"> <span class="glyphicon glyphicon-user"></span>用戶 </button> <button class="btn btn-default"> <span class="glyphicon glyphicon-home"></span>首頁 </button> <button class="btn btn-info"> <span class="glyphicon glyphicon-shopping-cart"></span>購物 </button>

顯示以下：

2.2 定製字體圖標

經過改變字體的尺寸、顏色和應用文本陰影來進行定製圖標。

 尺寸：

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
    <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-primary btn-lg" style="font-size: 30px">
    <span class="glyphicon glyphicon-user"></span> User
</button>

顏色：

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
    <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-primary btn-lg" style="color: black;">
    <span class="glyphicon glyphicon-user"></span> User
</button>

文本陰影：

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
    <span class="glyphicon glyphicon-user"></span> User
</button>
<button type="button" class="btn btn-primary btn-lg" style="text-shadow: red 9px 6px 6px;">
    <span class="glyphicon glyphicon-user"></span> User
</button>

 

 3.按鈕組

3.1 基本的按鈕組（.btn-group）

把帶有類.btn 的按鈕放在 .btn-group的容器中，造成按鈕組。實例：

<div class="btn-group"> 
    <button type="button" class="btn btn-default">按鈕 1</button> 
    <button type="button" class="btn btn-success">按鈕 2</button> 
    <button type="button" class="btn btn-primary">按鈕 3</button> 
    <button type="button" class="btn btn-default">按鈕 4</button> 
</div>

顯示：

3.2 按鈕工具(.btn-toolbar)

把幾組帶有類 .btn-group 的組件放在帶有 .btn-toolbar 的大容器中，造成更加複雜的組件。示例：

 1 <div class="btn-toolbar" role="toolbar"> 
 2     <div class="btn-group"> 
 3         <button type="button" class="btn btn-default">按鈕 1</button> 
 4         <button type="button" class="btn btn-default">按鈕 2</button> 
 5         <button type="button" class="btn btn-default">按鈕 3</button> 
 6     </div> 
 7     <div class="btn-group"> 
 8         <button type="button" class="btn btn-default">按鈕 4</button> 
 9         <button type="button" class="btn btn-default">按鈕 5</button> 
10         <button type="button" class="btn btn-default">按鈕 6</button> 
11     </div> 
12     <div class="btn-group"> 
13         <button type="button" class="btn btn-default">按鈕 7</button> 
14         <button type="button" class="btn btn-default">按鈕 8</button> 
15         <button type="button" class="btn btn-default">按鈕 9</button> 
16     </div> 
17 </div>

顯示：

3.3 按鈕大小（.btn-group-lg、.btn-group-md、.btn-group-sm、.btn-group-xs）

在<div class=".btn-group">中添加類 .btn-group-* 來改變整組按鈕的大小。 如<dic class=".btn-group btn-group-lg">。

在以上按鈕工具中改變按鈕大小。例如，在第2行、第7行、第12行分別添加類 .btn-group-lg、.btn-group-sm、btn-group-xs。結果以下：

3.4 嵌套

在一個 .btn-groug 組件中嵌套另外一個 .btn-group 組件，常常與下拉菜單一塊使用。代碼示例：

 1 <div class="btn-group"> 
 2     <button type="button" class="btn btn-default">按鈕 1</button> 
 3     <button type="button" class="btn btn-default">按鈕 2</button> 
 4     <div class="btn-group"> 
 5         <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
 6             按鈕3 <span class="caret"></span> 
 7         </button> 
 8         <ul class="dropdown-menu"> 
 9             <li><a href="#">下拉連接 1</a></li> 
10             <li><a href="#">下拉連接 2</a></li> 
11         </ul> 
12     </div> 
13 </div>

顯示:

3.5 按鈕組垂直（.btn-group-vertical）

把上面的程序的第1行和第4行中的<div class="btn-group">替換成<div class="btn-group-vertical">便可。結果顯示以下：

4 按鈕下拉菜單

4.1 基本的按鈕下拉菜單

把按鈕與下拉菜單結合使用，只須要在一個.btn-group中放置按鈕和下拉菜單便可。代碼示例如3.4中的嵌套代碼。

4.2 分割的按鈕下拉菜單

形如：。實際上是兩個按鈕組成，左邊的按鈕能夠帶有連接，也能夠不帶；右邊的按鈕與下拉菜單相結合，進而組成分割的按鈕下拉菜單。

代碼示例：

 1 <div class="btn-group">
 2     <button class="btn btn-primary">按鈕</button>
 3     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
 4         <span class="caret"></span>
 5         <span class="sr-only">下拉菜單觸發器</span>
 6     </button> 
 7     <ul class="dropdown-menu" role="menu"> 
 8         <li><a href="#">功能1</a></li> 
 9         <li><a href="#">功能2</a></li> 
10         <li><a href="#">功能3</a></li> 
11         <li class="divider"></li> 
12         <li><a href="#">分離的連接</a></li> 
13     </ul> 
14 </div> 

形如：

4.3 按鈕下拉菜單的大小（.btn-lg、.btn-sm、.btn-xs）

向.btn-group中的<button>元素添加類 .btn-lg、.btn-sm、.btn-xs，便可改變 按鈕下拉菜單的大小。形如：

4.4 按鈕上拉菜單(dropup)向父容器 .btn-group 添加類 .dropup便可。代碼示例;

 1 <div class="btn-group dropup"> 
 2     <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
 3         按鈕1<span class="caret"></span> 
 4     </button> 
 5     <ul class="dropdown-menu" role="menu"> 
 6         <li><a href="#">功能1</a></li> 
 7         <li><a href="#">功能2</a></li> 
 8         <li><a href="#">功能3</a></li> 
 9         <li class="divider"></li> 
10         <li><a href="#">分離的連接</a></li> 
11     </ul> 
12 </div>

顯示以下：