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">