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

1.按钮

# 为 、 或  元素添加按钮类（button class）即可使用 Bootstrap 提供的样式
class="btn btn-default" href="#" role="button">Link
class="btn btn-default" type="submit">Button
class="btn btn-default" type="button" value="Input">
class="btn btn-default" type="submit" value="Submit">

type="button" class="btn btn-default">（默认样式）Default
type="button" class="btn btn-primary">（首选项）Primary
type="button" class="btn btn-success">（成功）Success
type="button" class="btn btn-info">（一般信息）Info
type="button" class="btn btn-warning">（警告）Warning
type="button" class="btn btn-danger">（危险）Danger
type="button" class="btn btn-link">（链接）Link

2.尺寸

# 使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

  type="button" class="btn btn-primary btn-lg">（大按钮）Large button
  type="button" class="btn btn-default btn-lg">（大按钮）Large button


  type="button" class="btn btn-primary">（默认尺寸）Default button
  type="button" class="btn btn-default">（默认尺寸）Default button


  type="button" class="btn btn-primary btn-sm">（小按钮）Small button
  type="button" class="btn btn-default btn-sm">（小按钮）Small button


  type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button
  type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button


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

3.图片

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

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

4.辅助类

情境文本颜色：

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

情境背景色：

<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">×span>button>

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

<span class="caret">span>

快速浮动：

"pull-left">...
"pull-right">...

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

"clearfix">...

显示或隐藏内容：

"show">...
"hidden">...