bootstrap——css樣式（五、按鈕和圖片）

1、預定義樣式的按鈕
bootstrap爲我們設計了一些按鈕樣式

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</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>

2、按鈕尺寸
使用 .btn-lg、.btn-sm 或 .btn-xs 可以獲得不同尺寸的按鈕。

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>

3、塊級按鈕
通過給按鈕添加 .btn-block 類可以將其拉伸至父元素100%的寬度，而且按鈕也變爲了塊級（block）元素。

<button type="button" class="btn btn-primary btn-lg">Block level button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>

4、按鈕激活狀態
可以將 .active 應用到 button 上，並通過編程的方式使其處於激活狀態。

<button type="button" class="btn btn-default btn-lg active">Button</button>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

5、禁用狀態
1）按鈕禁用狀態
爲button元素添加 disabled 屬性，使其表現出禁用狀態。

<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

2）連接禁用狀態
爲基於a 元素創建的按鈕添加 .disabled 類。

<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

6、按鈕類
爲 a、button 或 input 元素應用按鈕類。

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

儘可能使用button 元素
7、響應式圖片
通過爲圖片添加 .img-responsive 類可以讓圖片支持響應式佈局。其實質是爲圖片設置了 max-width: 100%; 和 height: auto; 屬性，從而讓圖片在其父元素中更好的縮放。

<img src="..." class="img-responsive" alt="Responsive image">

8、圖片形狀

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">