<p align="center">

Bootstrap布局组件

Bootstrap字体图标

（1）、字体图标列表链接

<span style="color: #800000">（2）、用法

（3）、定制字体图标

<span class="glyphicon glyphicon-user"> User

2、Bootstrap下拉菜单

（1）、下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。这可以通过与 下拉菜单（Dropdown） JavaScript 插件 的互动来实现。

（2）、对齐

（3）、标题

Bootstrap 按钮组

Bootstrap 按钮下拉菜单

来指示按钮作为下拉菜单。

（1）、分割的按钮下拉菜单

（2）、按钮下拉菜单的大小

（3）、按钮上拉菜单

Bootstrap 输入框组

中。

内，在 class 为 .input-group-addon 的 内放置额外的内容。

放置在 元素的前面或者后面。

元素，因为它们在 WebKit 浏览器中不能完全渲染出效果。也不要直接向表单组应用输入框组的 class，输入框组是一个孤立的组件。

（1）、输入框组的大小

（2）、复选框和单选插件

 <input type="checkbox"&gt;

（3）、按钮插件

Go!

（4）、带有下拉菜单的按钮

<button type="button" class="btn btn-default

 dropdown-toggle" data-toggle="dropdown"&gt;

 下拉菜单

 <span class="caret"&gt;</span>

</button>

<ul class="dropdown-menu"&gt;

<li><a href="#"&gt;功能</a></li>

<li><a href="#"&gt;另一个功能</a></li>

<li><a href="#"&gt;其他</a></li>

<li class="divider"&gt;</li>

<li><a href="#"&gt;分离的链接</a></li>

</ul>

<input type="text" class="form-control">

（5）、分割的下拉菜单按钮

下拉菜单

 <span class="caret"&gt;</span>

 <span class="sr-only"&gt;切换下拉菜单</span>

</button>

<ul class="dropdown-menu"&gt;

  <li><a href="#"&gt;功能</a></li>

  <li><a href="#"&gt;另一个功能</a></li>

  <li><a href="#"&gt;其他</a></li>

  <li class="divider"&gt;</li>

  <li><a href="#"&gt;分离的链接</a></li>

</ul>

<input type="text" class="form-control">

6、Bootstrap 导航元素

(1)、表格导航或标签

（2）、胶囊式的导航菜单

B、垂直的胶囊式导航菜单

您可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠。

（3）、两端对齐的导航

您可以在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。

(4)、禁用链接

对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态，

(5)、下拉菜单

导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。

A、带有下拉菜单的标签

向标签添加下拉菜单的步骤如下：

以一个带有 class .nav 的无序列表开始。

添加 class .nav-tabs。

添加带有 .dropdown-menu class 的无序列表。

 Java <span class="caret"&gt;</span>

 <li><a href="#"&gt;Swing</a></li>

 <li class="divider"&gt;</li>

 <li><a href="#"&gt;分离的链接</a></li>

B、带有下拉菜单的胶囊

步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills。

7、Bootstrap 导航栏

导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

（1）、默认的导航栏

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

A、向

（2）、响应式的导航栏

为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的

 <li class="active"&gt;<a href="#"&gt;iOS</a></li>

 <li><a href="#"&gt;SVN</a></li>

 <li class="dropdown"&gt;

  <a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;

    Java <b class="caret"&gt;</b>

  </a>

  <ul class="dropdown-menu"&gt;

    <li><a href="#"&gt;jmeter</a></li>

    <li class="divider"&gt;</li>

    <li><a href="#"&gt;分离的链接</a></li>

    <li class="divider"&gt;</li>

    <li><a href="#"&gt;另一个分离的链接</a></li>

  </ul>

（3）、导航栏中的表单

导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class，它是使用 .navbar-form class。这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为。使用对齐方式选项（这将在组件对齐方式部分进行详细讲解）来决定导航栏中的内容放置在哪里。

<div class="form-group"&gt;

 <input type="text" class="form-control" placeholder="Search"&gt;

 </div>

 <button type="submit" class="btn btn-default"&gt;提交</button>

（4）、导航栏中的按钮

您可以使用 class .navbar-btn 向不在

 <div class="form-group"&gt;

<button type="button" class="btn btn-default navbar-btn">

 导航栏按钮

（5）、导航栏中的文本

如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与

标签一起使用，确保适当的前导和颜色。

（6）、非导航链接

如果您不想在常规的导航栏导航组件内使用标准的链接，那么请使用 class navbar-link 来为默认的和倒转的导航栏选项添加适当的颜色，

 <a href="#" class="navbar-link"&gt;Thomas</a>

（7）、组件对齐方式

您可以使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件。这两个 class 都会在指定的方向上添加 CSS 浮动。

（8）、固定到顶部

Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，您可以把它放置在页面的顶部或者底部，或者您可以让它成为随着页面一起滚动的静态导航栏。如果您想要让导航栏固定在页面的顶部，请向 .navbar class 添class .navbar-fixed-top。下面的实例演示了这点：为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。

（9）、固定到底部

如果您想要让导航栏固定在页面的底部，请向 .navbar class 添加 class .navbar-fixed-bottom。

(10)、静态的顶部

如需创建能随着页面一起滚动的导航栏，请添加 .navbar-static-top class。该 class 不要求向 添加内边距（padding）。

（11）、倒置的导航栏

为了创建一个带有黑色背景白色文本的倒置的导航栏，只需要简单地向 .navbar class 添加 .navbar-inverse class 即可，如下面的实例所示：

为了防止导航栏与页面主体中的其他内容的顶部相交错，请向 标签添加至少 50 像素的内边距（padding），内边距的值可以根据您的需要进行设置。

8、Bootstrap 面包屑导航（Breadcrumbs）

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

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

9、Bootstrap 分页

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

（2）、翻页（Pager）

如果您想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。

10、Bootstrap 标签

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

11、Bootstrap 徽章（Badges）

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

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把

badge">50

（2）、激活导航状态

您可以在激活状态的胶囊式导航和列表导航中放置徽章。通过使用

12、Bootstrap 超大屏幕（Jumbotron）

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

A、创建一个带有 class .jumbotron. 的容器

为了获得占用全部宽度且不带圆角的超大屏幕，请在所有的 .container class 外使用 .jumbotron class，

13、Bootstrap 页面标题（Page Header）

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

14、Bootstrap 缩略图

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

A、在图像周围添加带有 class .thumbnail 的 标签。

B、这会添加四个像素的内边距（padding）和一个灰色的边框。

C、当鼠标悬停在图像上时，会动画显示出图像的轮廓。

 <img src="/wp-content/uploads/2014/06/kittens.jpg"

 alt="通用的占位符缩略图"&gt;

（2）、添加自定义的内容

现在我们有了一个基本的缩略图，我们可以向缩略图添加各种 HTML 内容，比如标题、段落或按钮。具体步骤如下：

A、把带有 class .thumbnail 的 标签改为