下拉菜单（对齐方式）

Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right(left)”类名

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

下拉菜单

通过添加“divider”可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题）

<li role="presentation" class="dropdown-header">菜单名称</li>

下拉菜单（下拉分割线）

在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能。对应的样式代码：

在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min,js"></script>

声明

因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。

1、使用一个名为“dropdown”的容器包裹了整个下拉菜1单元素，示例中为:

<div class="dropdown"></div>

2、使用了一个<button>按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:

data-toggle="dropdown"

3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu

简单实用：

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">

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

</button>

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

    <li role="presentation"><a role="menuitem">下拉菜单项></a></li>

</ul>

</div>

列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*（向右移动）”和“col-md-pull-*(向左移动)” (其中星号代表移动的列组合数)。

列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*（向右移动）”和“col-md-pull-*(向左移动)” (其中星号代表移动的列组合数)。

列偏移

不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度

注意注意：：

不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示

网格系统基本用法

1、列组合

列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性

Bootstrap框架的网格系统工作原理如下：

1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。如：

<div class="container">

<div class="row"></div>

</div>

2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。如：

<div class="container">

<div class="row">

    <div class="col-md-4"></div>

    <div class="col-md-8"></div>

</div>

3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素

http://getbootstrap.com/components/#glyphicons 所有图像的名称

在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码例子

<span class="glyphicon glyphicon-search"></span>

图像

在Bootstrap框架中对于图像的样式风格提供以下几种风格，通过添加类名：

1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片

按钮状态--禁用状态

在Bootstrap框架中，要禁用按钮有两种实现方式：

方法1：在标签中添加disabled属性

方法2：在元素标签中添加类名“disabled”

举例子

<button class="btn btn-primary btn-lg btn-block" type="button" disabled = "disabled">通过disabled属性禁用按钮</button>

<button class="btn btn-priamary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>

button活动状态

Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种。

当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于<button>元素是通过“:active”伪类实现，而对于<a>这样的标签元素则是通过添加类名“.active”来实现。

下拉菜单分割线：在组与组之间添加一个空的<li>,并添加类名“ divider ”：

<li role="presentation" class="divider"></li>