BootStrap学习笔记（二）

Bootstrap 下拉菜单（Dropdowns）

如需使用下拉菜单，只需要在 class .dropdown 内加上下拉菜单即可。
对齐
通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单。

Bootstrap 按钮组

btn-group按钮组
btn-toolbar按钮组的按钮组

按钮下拉菜单

如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单。

Bootstrap 输入框组

输入框组扩展自 表单控件,向 .form-control 添加前缀或后缀元素的步骤如下：

1.把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
2.接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
3.把该 <span> 放置在 <input> 元素的前面或者后面。

Bootstrap 导航元素

nav 的class开始
nav-tabs 标签式
nav-pills 胶囊式
nav-stacked 垂直分布
nav-justified 两端对齐分布
disabled 禁用链接

导航栏

创建一个默认的导航栏的步骤如下：

1.向 <nav> 标签添加 class .navbar、.navbar-default。
2.向上面的元素添加 role="navigation"，有助于增加可访问性。
3.向 <div> 元素添加一个标题 class .navbar-header，内部包含了带有 class navbar-brand 的 <a> 元素。这会让文本看起来更大一号。
4.为了向导航栏添加链接，只需要简单地添加带有 class .nav、.navbar-nav 的无序列表即可。

静态的 static 反色用inverse

面包屑导航（Breadcrumbs）

面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。

Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加：

.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;
}

分页

分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。
翻页（Pager）

Bootstrap 标签

标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签。
您可以使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观

Bootstrap 徽章（Badges）

徽章与标签相似，主要的区别在于徽章的边角更加圆滑。

徽章（Badges）主要用于突出显示新的或未读的项。
如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。

超大屏幕（Jumbotron）。

顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：

1.创建一个带有 class .jumbotron. 的容器 <div>。
2.除了更大的 <h1>，字体粗细 font-weight 被减为 200。

页面标题（Page Header）

它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时。
页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），
请把您的标题放置在带有 class .page-header 的 <div> 中

缩略图

大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下：

1.在图像周围添加带有 class .thumbnail 的 <a> 标签。
2.这会添加四个像素的内边距（padding）和一个灰色的边框。
3.当鼠标悬停在图像上时，会动画显示出图像的轮廓。

警告（Alerts）

您可以通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class
（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，
来添加一个基本的警告框。

可取消的警告（Dismissal Alerts）
创建一个可取消的警告（Dismissal Alert）步骤如下：
1.通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
2.同时向上面的 <div> class 添加可选的 .alert-dismissable。
3.添加一个关闭按钮。
<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert"
            aria-hidden="true">
        &times;
    </button>
    成功！很好地完成了提交。
</div>

默认的进度条

创建一个基本的进度条的步骤如下：

1.添加一个带有 class .progress 的 <div>。
2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
3.添加一个带有百分比表示的宽度的 style 属性，例如 style="width: 60%"; 表示进度条在 60% 的位置。

创建不同样式的进度条的步骤如下：

1.添加一个带有 class .progress 的 <div>。
2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
3.添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

创建一个条纹的进度条的步骤如下：

1.添加一个带有 class .progress 和 .progress-striped 的 <div>。
2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的 <div>。其中，* 可以是 success、info、warning、danger。
3.添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

创建一个动画的进度条的步骤如下：

1.添加一个带有 class .progress 和 .progress-striped 的 <div>。同时添加 class .active。
2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
3.添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置。

这将会使条纹具有从右向左的运动感。

您甚至可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠，如下面的实例所示：

<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 40%;">
        <span class="sr-only">40% 完成</span>
    </div>
    <div class="progress-bar progress-bar-info" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 30%;">
        <span class="sr-only">30% 完成（信息）</span>
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar"
         aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width: 20%;">
        <span class="sr-only">20% 完成（警告）</span>
    </div>
</div>

Bootstrap 多媒体对象（Media Object）

这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：
1）.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
2）.media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

列表组

本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：

1.向元素 <ul> 添加 class .list-group。
2.向 <li> 添加 class .list-group-item。

向列表组添加链接，通过使用锚标签代替列表项，我们可以向列表组添加链接。我们需要使用 <div> 代替 <ul> 元素。
<a href="#" class="list-group-item active">
    免费域名注册
</a>
<a href="#" class="list-group-item">24*7 支持</a>
<a href="#" class="list-group-item">免费 Window 空间托管</a>
<a href="#" class="list-group-item">图像的数量</a>
<a href="#" class="list-group-item">每年更新成本</a>

Bootstrap 面板（Panels）

面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，
只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可.

面板标题,我们可以通过以下两种方式来添加面板标题：
1.使用 .panel-heading class 可以很简单地向面板添加标题容器。
2.使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

我们可以在面板中添加脚注，只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可。

使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板

Bootstrap Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，
只需要简单地把内容放在带有 class .well 的 <div> 中即可。

<div class="well">您好，我在 Well 中！</div>