玩转Bootstrap基础——网格系统、下拉菜单

列偏移（offset）:
只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度

<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>

列排序（改变左右浮动 push pull）：
改变列的方向，就是改变左右浮动，并且设置浮动的距离

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-push-8">.col-md-4</div>
    <div class="col-md-8 col-md-pull-4">.col-md-8</div>
  </div>
</div>

下拉菜单

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
    下拉菜单
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉菜单1</a></li>
        <li><a href="#">下拉菜单2</a></li>
        <li><a href="#">下拉菜单3</a></li>
        <li><a href="#">下拉菜单4</a></li>
        <li class="divider"></li>
        <li><a href="#">下拉菜单5</a></li>
    </ul>
</div>

添加一个空的< li >，并且给这个< li >添加类名“divider”来实现添加下拉分隔线的功能

菜单标题：dropdown-header

<li class="dropdown-header">第一部分菜单头部</li>

下拉菜单 对齐方式：相对于父容器右对齐(默认左对齐)

  <ul class="dropdown-menu pull-right" >

或者

<ul class="dropdown-menu dropdown-menu-right">

同时一定要为.dropdown添加 float:left 的css样式。
.dropdown{
float: left;
}

菜单项状态:

下拉菜单项的默认的状态（不用设置）有悬浮状态（:hover）和焦点状态（:focus）
还有当前状态（.active）和禁用状态（.disabled）。这两种状态使用方法只需要在对应的菜单项上添加对应的类名：
<li class="active">
<li class="disabled">