Bootstrap学习笔记（三） 按钮&尺寸&图片&辅助类

1.按钮

# 为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式
<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 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 就可以获得不同尺寸的按钮
<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

# 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素
<button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>

3.图片

通过为 <img> 元素添加以下相应的类，可以让图片呈现不同的形状

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

4.辅助类

情境文本颜色：

<p class="text-muted">111</p>
<p class="text-primary">222</p>
<p class="text-success">333</p>
<p class="text-info">444</p>
<p class="text-warning">555</p>
<p class="text-danger">666</p>

情境背景色：

<p class="bg-primary">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-success">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-info">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-warning">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

关闭按钮：

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符号：
通过使用三角符号可以指示某个元素具有下拉菜单的功能。注意，向上弹出式菜单中的三角符号是反方向的

<span class="caret"></span>

快速浮动：

<div class="pull-left">...</div>
<div class="pull-right">...</div>

清除浮动：
通过为父元素添加 .clearfix 类可以很容易地清除浮动

<div class="clearfix">...</div>

显示或隐藏内容：

<div class="show">...</div>
<div class="hidden">...</div>