WEB代码：bootstrap3的速查手册

---

反色的导航条

通过添加 .navbar-inverse 类可以改变导航条的外观。

---

静止在顶部

通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。

---

固定在底部

添加 .navbar-fixed-bottom 类可以让导航条固定在底部

---

固定在顶部

添加 .navbar-fixed-top 类可以让导航条固定在顶部

---

组件排列

通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。
两个类都会通过 CSS 设置特定方向的浮动样式。

---

非导航的链接

使用 .navbar-link 类可以让链接有正确的默认颜色和反色设置。

---

文本

把文本包裹在 .navbar-text中时，为了有正确的行距和颜色，通常使用 <p> 标签。

---

按钮

对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。

---

表单

将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐

---

品牌图标

.navbar-brand

---

导航条

navbar

---

导航条

.navbar——设置nav元素为导航条组件；

.navbar-default——指定导航条组件为默认主题；

.navbar-inverse——指定导航条组件为黑色主题；

.navbar-fixed-top——设置导航条组件固定在顶部；

.navbar-fixed-bottom——设置导航条组件固定在底部；

.container-fluid——设置宽度充满父元素，即为100%；

.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；

.navbar-toggle——设置button元素为导航条组件的切换钮；

.collapsed——设置button元素为在视口小于768px时才显示；

.navbar-brand——设置导航条组件内的品牌图标；

navbar-brand默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下.

---

**

Jumbotron--超大屏幕

---

按钮

.btn 	为按钮添加基本样式 	

.btn-default 	默认/标准按钮 	

.btn-primary 	原始按钮样式（未被操作） 	

.btn-success 	表示成功的动作 	

.btn-info 	该样式可用于要弹出信息的按钮 	

.btn-warning 	表示需要谨慎操作的按钮 	

.btn-danger 	表示一个危险动作的按钮操作 	

.btn-link 	让按钮看起来像个链接 (仍然保留按钮行为) 	

.btn-lg 	制作一个大按钮 	

.btn-sm 	制作一个小按钮 	

.btn-xs 	制作一个超小按钮 	

.btn-block 	块级按钮(拉伸至父元素100%的宽度) 	

.active 	按钮被点击 	

.disabled 	禁用按钮

---

列表组

list-group --列表组
list-group-item--基本实例
badge  徽章
用 <a> 标签代替 <li> 标签可以组成一个全部是链接的列表组（还要注意的是，我们需要将 <ul> 标签替换为 <div> 标签）。
<a href="#" class="list-group-item active">

按钮
<button type="button" class="list-group-item">Cras justo odio</button>

被禁用的条目
为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色

情境类
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

定制内容
<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

---

**

---

**

---

**

---

**

---

**

---

**

---

**