JavaWeb--------BootStrap基础

已于 2023-08-31 01:07:28 修改
阅读量7.8k 收藏 5
点赞数 1
分类专栏： 编程 文章标签： bootstrap 前端 html
于 2018-03-07 20:37:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41655101/article/details/79476506
版权

目录

一. Bootstrap 简介

二. BootStrap 环境的安装

三. BootStrap 网格

四. BootStrap 按钮

五. BootStrap 表单

六. BootStrap 控键

一. Bootstrap 简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

为什么使用 Bootstrap？
移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
浏览器支持：所有的主流浏览器都支持 Bootstrap。
Internet Explorer  Firefox  Opera  Google Chrome  Safari
容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案。
它包含了功能强大的内置组件，易于定制。
它还提供了基于 Web 的定制。

它是开源的。

Bootstrap 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构部分做详细的讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分做详细的讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件部分做详细的讲解。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件部分做详细的讲解。

定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

Bootstrap 实例1，代码如下：

<div class="container"> 
 <div class="jumbotron"> 
    <h1>我的第一个 Bootstrap 页面</h1> 
    <p>重置窗口大小，查看响应式效果！</p> 
  </div> 
  <div class="row"> 
    <div class="col-sm-4"> 
      <h3>Column 1</h3> 
      <p>开始学习BootStrap！</p> 
    </div> 
    <div class="col-sm-4"> 
      <h3>Column 2</h3> 
      <p>开始学习BootStrap！</p> 
    </div> 
    <div class="col-sm-4"> 
      <h3>Column 3</h3> 
      <p>开始学习BootStrap！</p> 
    </div> 
  </div> 
</div>

Bootstrap 实例2，代码如下：

<div class="container"> 
  <p>Create a responsive table with alternating cell background color:</p> 
  
  <div class="table-responsive"> 
    <table class="table table-striped table-bordered"> 
      <thead> 
        <tr> 
          <th>#</th> 
          <th>Name</th> 
          <th>Street</th> 
        </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <td>1</td> 
          <td>Anna Awesome</td> 
          <td>Broome Street</td> 
        </tr> 
        <tr> 
          <td>2</td> 
          <td>Debbie Dallas</td> 
          <td>Houston Street</td> 
        </tr> 
        <tr> 
          <td>3</td> 
          <td>John Doe</td> 
          <td>Madison Street</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
</div>

二. BootStrap 环境的安装

Bootstrap 安装是非常容易的。本章将讲解如何下载并安装 Bootstrap，讨论 Bootstrap 文件结构，并通过一个实例演示它的用法。
1） 下载 Bootstrap

您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：

Bootstrap 下载，您会看到两个按钮：
Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。
为了更好的了解和更方便的使用，我们将在本教程中使用 Bootstrap 的预编译版本。
由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。
本教程编写时，使用的是最新版（Bootstrap 3）。
2） 文件结构
预编译的 Bootstrap

当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：

已编译的 Bootstrap 文件结构
如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的 CSS 和 JS（bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。
Bootstrap 源代码

如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：

Bootstrap 源代码结构
less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。
3） HTML 模板

一个使用了 Bootstrap 的基本的 HTML 模板如下所示：

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="//apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>       <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

在这里，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

有关上面代码段中每个元素的细节将在 Bootstrap CSS 概览 章节详细讲解。

现在让我们尝试使用Bootstrap输出"Hello, world!"：

<h1>Hello, world!</h1>

三. BootStrap 网格

1） Bootstrap 网格系统 
网格系统允许我们正确地布局我们网站的内容。
它将屏幕划分为多个行和列，可用于创建各种类型的布局。
一旦我们定义了行和列，我们可以在其中放置HTML元素。
Bootstrap的网格系统将屏幕划分为列 - 每行最多12个。
列宽根据屏幕的大小而变化。因此，Bootstrap的网格系统是响应式的，因为当浏览器窗口的大小改变时，列动态地调整大小。
你可以创建无限数量的行。这些行和列的交集形成了一个矩形网格，以包含网站的内容。
列类
Twitter Bootstrap 3具有响应式移动第一流体网格系统，随着设备或视口大小的增加，可适当放大到12列。
Bootstrap 3有预定义的网格类，可以快速为不同类型的设备，如手机、平板电脑、台式机等制作网格布局。
我们可以使用 .col-xs- 类来为超小型设备，如手机，创建网格列。对于像平板电脑这样的小屏幕设备，使用 .col-sm- 。对中等大小的设备（如台式机）使用 .col-md- 类，对于大型桌面显示器使用.col-lg- 。

下表总结了新网格系统的一些关键特性。

以下代码显示如何使用 col-md- 类。

<div class="container">
  <div class="row">
    <div class="col-md-4"><p>Box 1</p></div>
    <div class="col-md-4"><p>Box 2</p></div>
    <div class="col-md-4"><p>Box 3</p></div>
    <div class="col-md-4"><p>Box 4</p></div>
    <div class="col-md-4"><p>Box 5</p></div>
    <div class="col-md-4"><p>Box 6</p></div>
    <div class="col-md-4"><p>Box 7</p></div>
    <div class="col-md-4"><p>Box 8</p></div>
    <div class="col-md-4"><p>Box 9</p></div>
    <div class="col-md-4"><p>Box 10</p></div>
    <div class="col-md-4"><p>Box 11</p></div>
    <div class="col-md-4"><p>Box 12</p></div>
  </div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4"><p>Box 1</p></div>
            <div class="col-md-4"><p>Box 2</p></div>
            <div class="col-md-4"><p>Box 3</p></div>
            <div class="col-md-4"><p>Box 4</p></div>
            <div class="col-md-4"><p>Box 5</p></div>
            <div class="col-md-4"><p>Box 6</p></div>
            <div class="col-md-4"><p>Box 7</p></div>
            <div class="col-md-4"><p>Box 8</p></div>
            <div class="col-md-4"><p>Box 9</p></div>
            <div class="col-md-4"><p>Box 10</p></div>
            <div class="col-md-4"><p>Box 11</p></div>
            <div class="col-md-4"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

案例，以下代码显示了如何使用.clearfix类和响应实用程序类。

<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap 3 Grid System</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4"><p>Box 1</p></div>
            <div class="col-md-4"><p>Box 2</p></div>
            <div class="col-md-4"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4"><p>Box 4</p></div>
            <div class="col-md-4"><p>Box 5</p></div>
            <div class="col-md-4"><p>Box 6</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4"><p>Box 7</p></div>
            <div class="col-md-4"><p>Box 8</p></div>
            <div class="col-md-4"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-md-4"><p>Box 10</p></div>
            <div class="col-md-4"><p>Box 11</p></div>
            <div class="col-md-4"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

默认网格系统有12列，我们在每第三次出现后清除列。
用.visible-md-block 使.clearfix 使类仅在中等大小的设备上有效，并且隐藏在其他设备上。
定制各种尺寸设备

自定义平板电脑的布局，将内容呈现为2x6网格（即2列和6行），在每个列上添加.col-sm-6类。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 50px;
        font-size: 32px;
        font-weight: bold;
        text-align: center;
        background: #f2f2f2;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4"><p>Box 1</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 2</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 3</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 4</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 5</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 6</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 7</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 8</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 9</p></div>
            <div class="clearfix visible-md-block"></div>
            <div class="col-sm-6 col-md-4"><p>Box 10</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 11</p></div>
            <div class="col-sm-6 col-md-4"><p>Box 12</p></div>
        </div>
    </div>
</body>
</html>

2） Bootstrap 网格列

Bootstrap有四种类型的前缀，用于为不同大小的显示创建列：
    col-xs用于超小显示器（屏幕宽度<768px）
    col-sm用于较小的显示器（屏幕宽度> = 768px）
    col-md用于中等显示器（屏幕宽度> = 992px）
    col-lg用于较大的显示器（屏幕宽度> = 1200px）
当我们指定类 col-xs-12 时，它表示元素应在额外的小屏幕上跨越所有12个可用的Bootstrap列。

让我们检查下面的标记：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <h4>Column 1</h4>
        </div>
        <div class="col-xs-12 col-sm-6">
            <h4>Column 2</h4>
        </div>
    </div>
</div>

在这段代码中，我们将col-xs-12 类用于超小显示器和类 col-sm-6 用于较小的显示器。 因此，超小型显示器中的每一列将占用所有12个可用的Bootstrap列，这将显示为列的堆栈。然而在较小的显示器上，它们每个只占用6个Bootstrap列，实现两列布局。

案例，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <h4>Column 1</h4>
            </div>
            <div class="col-xs-12 col-sm-6">
                <h4>Column 2</h4>
            </div>
        </div>
    </div>
  </body>
</html>

你可以调整浏览器窗口的大小以查看动态更改。

嵌套列

我们可以在布局中的任何列中创建一组新的12个Bootstrap列，以便创建嵌套列。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
<div class="container">
    <div class="row">
        <div class="col-md-6 col1">
            <h3>Column 1</h3>
            <!-- Nesting Starts  -->
            <div class="row">
                <div class="col-md-6 col3">
                    <h3>Column 4</h3>
                </div>
                <div class="col-md-6 col4">
                    <h3>Column 5</h3>
                </div>
            </div>
        </div>
        <div class="col-md-6 col2">
            <h3>Column 2</h3>
        </div>
    </div>
</div>
  </body>
</html>

偏移列

偏移用于增加列的左边距。
例如，如果你有一个列出现在三个Bootstrap列之间，则可以使用偏移功能。
可用于偏移的类有：
    col-xs-offset-*
    col-sm-offset-*
    col-md-offset-*

    col-lg-offset-*

假设我们要在超小显示器中向右移动一列三个Bootstrap列，我们可以使用类“col-xs-offset-3”，例如：

此代码将产生一个跨越6个Bootstrap列的列，向右偏移三列。

居中列

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3 col1">
                <h1>Hello!</h1>
            </div>
        </div>
  </body>
</html>

我们可以使用偏移来使列居中。只需将相同数量的列放置在居中列的两侧。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
        <div class="row">
            <div class="col-xs-6 col-xs-offset-3">
                <h1 style="background:#EEE">Hello!</h1>
            </div>
        </div>
  </body>
</html>

向左拉，向右拉

诸如col-xs-pull- * 和 col-xs-push- * 等的类用于将列向左和向右移动一定数量的列。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
    <div class="row">
        <div class="col-xs-9 col-xs-push-3">
            <h1>col-xs-push-3</h1>
        </div>
        <div class="col-xs-3 col-xs-pull-9">
            <h1>col-xs-pull-9</h1>
        </div>
    </div>

  </body>
</html>

注意：在代码中，col-xs-9列由三列推送，因此它向右移动。 col-xs-3列也被向左拉9列。它们似乎在浏览器上查看时已交换了其原始位置。
根据屏幕大小有push和pull类的几个变体：
col-xs-pull-*和col-xs-push-*用于超小的屏幕
col-sm-pull-*和col-sm-push-*用于较小的屏幕
col-md-pull-*和col-md-push-*用于中等的屏幕
col-lg-pull-*和col-lg-push-*用于较大的屏幕
你可以用1到12之间的整数替换*。

Bootstrap 动态布局

3） Bootstrap 网格列 

让我们看看如何把网格系统付诸实践，创造一个动态布局，可根据要查看的设备的大小进行调整。
台式机的设计 

下面的代码显示了如何使用 col-md-12 中等大小的列来为台式机设计。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1>My  First  Bootstrap Blog</h1>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <h3>Post Title  1</h3>
                <p>Lorem ipsum  dolor  sit amet,  consectetur adipisicing aliqua. </p>
            </div>
            <div class="col-md-4">
                <h3>Post Title  2</h3>
                <p>Lorem ipsum  dolor  sit amet,  consectetur adipisicing
                elit,  sed do eiusmod tempor  incididunt ut labore  et dolore  magna
                aliqua. </p>
            </div>
            <div class="col-md-4">
                <h3>Post Title  3</h3>
                <p>Lorem ipsum  dolor  sit amet,  consectetur adipisicing
                elit,  sed do eiusmod tempor  incididunt ut labore  et dolore  magna
                aliqua. </p>
            </div>
        </div>
    </div>
  </body>
</html>

接下来，我们将直接将列添加到之前代码中列的现有行。

Bootstrap在一行中只允许12个Bootstrap列。如果我们试图超过这一点，其余的列将被调整进入下一行。这个新行将再次具有12个Bootstrap列的容量。 这样我们可以将所有日志帖子列绑定到一行。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>
  <body>
<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <h1>My  First  Bootstrap Blog</h1>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4">
            <h3>Post Title  1</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  2</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  3</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  4</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  5</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4">
            <h3>Post Title  6</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
    </div>
</div>
  </body>
</html>

平板电脑的设计

接下来我们将修改我们的代码来实现平板电脑的布局。
平板电脑可以以两种格式查看：纵向和横向。
平板电脑的横向视图被视为中等大小的显示（屏幕宽度>= 992px），我们使用col-md-*类来处理。
我们现在剩下的是纵向视图，这是一个小尺寸的显示。这可以使用 col-sm-* 类来实现。

由于我们必须在较小的显示器中实现两列布局，我们必须强制每列跨越6个Bootstrap列。这样我们在每一行中只得到两列（2*6个Bootstrap列= 12个Bootstrap列）。因此，一旦所有的12个Bootstrap列被占用，其余列将出现在下一行中，用于每次创建新的行时。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

</head>
  <body>
<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <h1>My  First  Bootstrap Blog</h1>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  1</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  2</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  3</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  4</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  5</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6">
            <h3>Post Title  6</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
    </div>
</div>

  </body>
</html>

调整浏览器窗口大小以查看更改。
手机的设计
像平板电脑一样，手机也可以在横向和纵向模式下查看。移动设备中的横向视图使用col-sm-* 类的小尺寸显示（屏幕宽度> = 768px）。
移动设备中的纵向视图采用超小尺寸显示（屏幕宽度<768px）。
对于超小屏幕，我们必须使用col-xs 前缀的类。在这里，我们希望每个日志帖子列占用所有的12个Bootstrap列，以便我们有每行只有一个日志帖子。

我们的类将是 col-xs-12 ，所以让我们继续将这个类添加到我们的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body>
<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <h1>My  First  Bootstrap Blog</h1>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  1</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  2</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  3</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  4</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  5</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
        <div class="col-md-4 col-sm-6 col-xs-12">
            <h3>Post Title  6</h3>
            <p>Lorem ipsum  dolor  sit amet ... </p>
        </div>
    </div>
</div>
  </body>
</html>

4） Bootstrap 实用类

我们可以使用以下类来启用屏幕尺寸落在特定范围内的设备上的元素的可见性。
.visible-*-*类有三种变体，每个CSS显示属性值一个：inline，block和inline-block。

我们可以混合上述类，使元素在多个设备上可见。

我们可以对任何元素应用类 .visible-xs-* 和 .visible-md-*，使其在超小型和中型设备上可见。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 10px;
        background: #EEEEEE;
    }
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p class="visible-xs">
    This paragraph is visible only on <strong>Extra Small Devices</strong> 
    that has screen width less than <code>768px</code>.</p>
    <p class="visible-sm">
    This paragraph is visible only on <strong>Small Devices</strong> 
    that has screen width greater than equal to <code>768px</code> but less than <code>992px</code>.</p>
    <p class="visible-md">This paragraph is visible only on <strong>Medium Devices</strong> 
    that has screen width greater than or equal to <code>992px</code> but 
    less than <code>1200px</code>.</p>
    <p class="visible-lg">This paragraph is visible only on <strong>Large Devices</strong> that 
    has screen width greater than or equal to <code>1200px</code>.</p>
</div>
</body>
</html>

hidden类

我们可以使用以下hidden类来隐藏某些设备上的元素。

我们可以混合上面的类，使元素在多个设备上隐藏。

我们可以在任何元素上应用类 .hidden-xs和 .hidden-md，使其在超小型和中小型设备上隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    p{
        padding: 20px;
        background: #E6E6FA;
        border-radius: 5px;
    }
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <p class="hidden-xs">This paragraph is hidden only on <strong>Extra Small Devices</strong> that 
    has screen width less than <code>768px</code>.</p>
    <p class="hidden-sm">This paragraph is hidden only on <strong>Small Devices</strong> that has 
    screen width greater than equal to <code>768px</code> but less than <code>992px</code>.</p>
    <p class="hidden-md">This paragraph is hidden only on <strong>Medium Devices</strong> that has 
    screen width greater than or equal to <code>992px</code> but less than <code>1200px</code>.</p>
    <p class="hidden-lg">This paragraph is hidden only on <strong>Large Devices</strong> that has 
    screen width greater than or equal to <code>1200px</code>.</p>
</div>
</body>
</html>

显示/隐藏打印
我们可以使用以下实用类来显示或隐藏某些元素用于打印目的。

四. BootStrap 按钮

我们可以在Bootstrap中轻松创建一个按钮，通过添加 btn 类将a，button或input元素转换为Bootstrap中的花式粗体按钮。

<a href="#" class="btn btn-primary">Click Here</a>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
  <body style="margin:30px">
     <a href="#" class="btn btn-primary">Click Here</a>
  </body>
</html>

上面的代码呈现如下：

按钮有各种颜色选项：
btn-default为白色
btn-primary为深蓝色
btn-success为绿色
btn-info为浅蓝色
btn-warning为橙色
btn-danger为红色

下表列出了Bootstrap中可用的不同按钮：

各种尺寸：
btn-lg用于大按钮
btn-sm用于小按钮
btn-xs用于超小的按钮
还有一些辅助类的按钮可用：
btn-block将使按钮跨越整个网格
active将使按钮看起来像它当前点击
disabled将使按钮无法单击并显示渐变色。

以下示例将显示这些按钮的操作。

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
<hr>
<input type="button" class="btn btn-default" value="Default">
<input type="button" class="btn btn-primary" value="Primary">
<input type="button" class="btn btn-info" value="Info">
<input type="button" class="btn btn-success" value="Success">
<input type="button" class="btn btn-warning" value="Warning">
<input type="button" class="btn btn-danger" value="Danger">
<input type="button" class="btn btn-link" value="Link">
<hr>
<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-link">Link</a>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
  <hr>
    <input type="button" class="btn btn-default" value="Default">
    <input type="button" class="btn btn-primary" value="Primary">
    <input type="button" class="btn btn-info" value="Info">
    <input type="button" class="btn btn-success" value="Success">
    <input type="button" class="btn btn-warning" value="Warning">
    <input type="button" class="btn btn-danger" value="Danger">
    <input type="button" class="btn btn-link" value="Link">
    <hr>
    <a href="#" class="btn btn-default">Default</a>
    <a href="#" class="btn btn-primary">Primary</a>
    <a href="#" class="btn btn-info">Info</a>
    <a href="#" class="btn btn-success">Success</a>
    <a href="#" class="btn btn-warning">Warning</a>
    <a href="#" class="btn btn-danger">Danger</a>
    <a href="#" class="btn btn-link">Link</a>
</div>
</body>
</html>

上面的代码呈现如下：

 

五. BootStrap 表单

1） Bootstrap 复选框
由 wcxstyle 创建，youj 最后一次修改 2017-01-05

Bootstrap将一组复选框或单选按钮组合成一组并排放置的Bootstrap按钮。

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">

</script>  
</head>
  <body style="margin:30px">
    <div class="btn-group" data-toggle="buttons">
        <label  class="btn btn-default">
            <input  type="checkbox"> Option  1
        </label>
        <label class="btn btn-default">
            <input  type="checkbox"> Option  2
        </label>
        <label  class="btn btn-default">
            <input  type="checkbox"> Option  3
        </label>
    </div>
  </body>
</html>

你可以通过混合Bootstrap的按钮类，例如btn-primary，btn-info等在按钮组中创建多颜色按钮。

复选框组

我们可以将属性data-toggle=“buttons”添加到一组复选框，用于在按钮组上切换复选框样式。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary">
            <input type="checkbox"> Option 1
        </label>
        <label class="btn btn-primary">
            <input type="checkbox"> Option 2
        </label>
        <label class="btn btn-primary">
            <input type="checkbox"> Option 3
        </label>
    </div>
</div>
</body>
</html>

预检查

将input的label元素上的类.active添加到预检查的选项。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary active">
            <input type="checkbox"> Option 1
        </label>
        <label class="btn btn-primary">
            <input type="checkbox"> Option 2
        </label>
        <label class="btn btn-primary active">
            <input type="checkbox"> Option 3
        </label>
    </div>
</div>
</body>
</html>

2） Bootstrap 表单 

在本教程中，我们将学习如何使用Bootstrap创建精致的表单。
Bootstrap提供三种不同类型的表单布局：
    垂直表单（默认表单布局）
    水平表单

    内联表单

垂直表单布局

垂直表单布局中的表单控件在顶部以左对齐标签堆叠。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="form-group">
            <label for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
</div>
</body>
</html>

Bootstrap将设置文本元素，如<input>，<textarea>和<select>，类.form-control的默认宽度为100％。
对于每个标签和输入字段，我们需要一个 form-group分类的div元素。
将类 form-control 附加到输入元素将使其成为全角元素。

案例，让我们创建一个输入字段，以询问访问者的名字：

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".myDropdownHandle").dropdown("toggle");
});
</script>  
</head>
  <body style="margin:30px">
    <form  class="form">
    <div class="form-group">
        <label  for="nameField">Name</label>
        <input  type="text" 
                class="form-control" 
                id="nameField" 
                placeholder="Your Name"/>
    </div>
    </form>
  </body>
</html>

表单按钮

我们用电子邮件、电话号码和textarea字段填写表单，最后是提交按钮。

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".myDropdownHandle").dropdown("toggle");
});
</script>  
</head>
  <body style="margin:30px">
    <form  class="form">
        <div class="form-group">
            <label  for="nameField">Name</label>
            <input  type="text" class="form-control" id="nameField" placeholder="Your Name"  />
        </div>
        <div class="form-group">
            <label  for="emailField">Email</label>
            <input  type="email" class="form-control" id="emailField" placeholder="Your Email"  />
        </div>
        <div class="form-group">
            <label  for="phoneField">Phone</label>
            <input  type="text" class="form-control" id="phoneField" placeholder="Your Phone  Number" />
        </div>
        <div class="form-group">
            <label  for="descField">Description</label>
            <textarea class="form-control" id="descField" placeholder=" Your Comments"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-default">Reset</button>
    </form>
  </body>
</html>

水平表单

在水平表单布局中，标签右对齐并向左浮动，使它们与表单控件显示在同一行上。
在<form>元素中我们需要.form-horizontal类。
在<div>元素中封装标签和表单控件，并应用类.form-group。
使用Bootstrap的网格类来对齐标签和表单控件。

将类.control-label添加到<label>元素。

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".myDropdownHandle").dropdown("toggle");
});
</script>  
</head>
  <body style="margin:30px">
    <form  class="form-horizontal">
        <div class="form-group">
            <label  for="nameField" class="col-xs-2">Name</label>
            <div class="col-xs-10">
                <input  type="text" class="form-control" id="nameField" placeholder="Your Name"  />
            </div>
        </div>
        <div class="form-group">
            <label  for="emailField" class="col-xs-2">Email</label>
            <div class="col-xs-10">
                <input  type="email" class="form-control" id="emailField" placeholder="Your Email"  />
            </div>
        </div>
        <div class="form-group">
            <label  for="phoneField" class="col-xs-2">Phone</label>
            <div class="col-xs-10">
                <input  type="text" class="form-control" id="phoneField" placeholder="Your Phone  Number" />
            </div>
        </div>
        <div class="form-group">
            <label  for="descField" class="col-xs-2">Description</label>
            <div class="col-xs-10">
                <textarea class="form-control" id="descField" placeholder="Your Comments"></textarea>
            </div>
        </div>
        <div class="col-xs-10 col-xs-offset-2">
            <button type="submit" class="btn btn-primary">Submit </button> 
            <button type="reset" class="btn btn-default">Reset</button>
        </div>
    </form>
  </body>
</html>

内联表单

我们可以创建元素存在于一行中的表单。
使用 form-inline 使表单元素内联。

内联表单的标记如下：

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".myDropdownHandle").dropdown("toggle");
});
</script>  
</head>
  <body style="margin:30px">
    <div class="well well-sm">
        <form  class="form-inline">
            <div class="form-group">
                <input  type="email" class="form-control" id="emailField" placeholder="Enter email">
            </div>
            <div class="form-group">
                <input  type="password" class="form-control" id="passwordField" placeholder="Password">
            </div>
            <div class="checkbox">
                <label><input  type="checkbox"> Remember me</label>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
    </div>
  </body>
</html>

Bootstrap 表单插件

前置和附加输入
我们可以在任何基于文本的输入之前或之后添加文本、图标或按钮。
使用.input-group-addon类在一个<span>元素中封装文本或图标，并将其放置在<input>元素之前或之后。
在<div>中封装<span>和基于文本的<input>，然后应用.input-group类。

Bootstrap只能预先添加或附加到基于文本的输入。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
  <form>
        <div class="row">
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                    <input type="text" class="form-control" placeholder="Username">
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Amount">
                    <span class="input-group-addon">.00</span>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="input-group">
                    <span class="input-group-addon">$</span>
                    <input type="text" class="form-control" placeholder="US Dollar">
                    <span class="input-group-addon">.00</span>
                </div>
            </div>
        </div>
    </form>
    <hr>
    <form>
        <div class="input-group">
            <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
            <input type="text" class="form-control" placeholder="Username">
        </div>
        <br>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Amount">
            <span class="input-group-addon">.00</span>
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="text" class="form-control" placeholder="US Dollar">
            <span class="input-group-addon">.00</span>
        </div>
    </form>
</div>
</body>
</html>

案例，我们可以在input组的插件而不是文本中放置复选框或单选按钮。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="row">
          <div class="col-xs-6">
            <div class="input-group">
              <span class="input-group-addon">
                <input type="checkbox">
              </span>
              <input type="text" class="form-control">
            </div>
          </div>
          <div class="col-xs-6">
            <div class="input-group">
              <span class="input-group-addon">
                <input type="radio">
              </span>
              <input type="text" class="form-control">
            </div>
          </div>
        </div>
    </form>
    <hr>
    <form>
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox">
            </span>
            <input type="text" class="form-control">
        </div>
        <br>
        <div class="input-group">
            <span class="input-group-addon">
                <input type="radio">
            </span>
            <input type="text" class="form-control">
        </div>
    </form>
</div>
</body>
</html>

Bootstrap 表单验证 

表单验证

Bootstrap还有三个input元素的验证状态：
has-success将使标签文本和边框字段的颜色变为绿色
has-error将使用棕色
has-warning将使用深红色

下面是一个如何使用验证状态的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".myDropdownHandle").dropdown("toggle");
});
</script>  
</head>
  <body style="margin:30px">
        <div class="form-group has-success">
           <label  class="control-label" 
                   for="inputField">Input with success</label>
           <input  type="text" class="form-control" id="inputField"/>
        </div>
  </body>
</html>

这些 has-*类型类只会将颜色应用于form-control， control-label和 help-block类元素。

小案例，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <form class="form-horizontal">
        <div class="form-group has-success">
            <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
            <div class="col-xs-10">
                <input type="text" id="inputSuccess" class="form-control" 
                placeholder="Input with success">
                <span class="help-block">Username is available</span>
            </div>
        </div>
        <div class="form-group has-warning">
            <label class="col-xs-2 control-label" for="inputWarning">Password</label>
            <div class="col-xs-10">
                <input type="password" id="inputWarning" class="form-control" 
                placeholder="Input with warning">
                <span class="help-block">Password strength: Weak</span>
            </div>
        </div>
        <div class="form-group has-error">
            <label class="col-xs-2 control-label" for="inputError">Email</label>
            <div class="col-xs-10">
                <input type="email" id="inputError" class="form-control" 
                placeholder="Input with error">
                <span class="help-block">Please enter a valid email address</span>
            </div>
        </div>
    </form>
</div>
</body>
</html>

feedback图标

我们可以通过在.form-group和glyphicon上使用类.has-feedback，以在输入框添加feedback图标。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <form class="form-horizontal">
        <div class="form-group has-success has-feedback">
            <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
            <div class="col-xs-10">
                <input type="text" id="inputSuccess" class="form-control" 
                placeholder="Input with success">
                <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                <span class="help-block">Username is available</span>
            </div>
        </div>
        <div class="form-group has-warning has-feedback">
            <label class="col-xs-2 control-label" for="inputWarning">Password</label>
            <div class="col-xs-10">
                <input type="password" id="inputWarning" class="form-control" 
                placeholder="Input with warning">
                <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                <span class="help-block">Password strength: Weak</span>
            </div>
        </div>
        <div class="form-group has-error has-feedback">
            <label class="col-xs-2 control-label" for="inputError">Email</label>
            <div class="col-xs-10">
                <input type="email" id="inputError" class="form-control" placeholder="Input with error">
                <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                <span class="help-block">Please enter a valid email address</span>
            </div>
        </div>
    </form>
</div>
</body>
</html>

六. BootStrap 控键

1） Bootstrap 警告

由 wcxstyle 创建，youj 最后一次修改 2017-01-05
Bootstrap带有一个非常有用的组件用于显示警告（alert）消息。
我们可以使用它们来显示成功消息、警告消息、失败消息或信息消息。

以下是“success”警告消息的标记：

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
  <body style="margin:30px">
    <div class="alert alert-success">
        Amount  has been transferred successfully.
    </div>
  </body>
</html>

每个警告都应该附加 alert 类。
它还应该有一个附加的上下文类，例如alert-success。警告消息有四个不言自明的上下文类：
        alert-success
        alert-info
        alert-danger

        alert-warning

警告中的链接

要在警告中放置链接，需要向a元素添加类 alert-link。下面提供了相对于警告框颜色的链接匹配颜色：

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</head>
  <body style="margin:30px">
    <div class="alert alert-success alert-dismissable">
        <button type="button" class="close" 
                data-dismiss="alert">×</button>
        Amount  has been transferred successfully. 
        Go to <a href="http://www.w3cschool.cn" class="alert-link">account page</a>.
    </div>
  </body>
</html>

警报警告

我们可以使用.alert类创建警报警告消息。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-warning">
        <a href="#" class="close" data-dismiss="alert">×</a>
        <strong>Warning!</strong> There was a problem with your network connection.
    </div>
</div>
</body>
</html>

错误或危险警告

我们可以通过向.alert基类添加一个额外的类.alert-error来创建错误或危险警告消息。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-danger alert-error">
        <a href="#" class="close" data-dismiss="alert">×</a>
        <strong>Error!</strong> A problem has been occurred while submitting your data.
    </div>
</div>
</body>
</html>

成功或确认警告

要创建成功或确认警告消息，需向.alert基类添加一个额外的类.alert-success。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-success">
        <a href="#" class="close" data-dismiss="alert">×</a>
        <strong>Success!</strong> Your message has been sent successfully.
    </div>
</div>
</body>
</html>

信息警告

对于信息警告消息，向.alert基类添加一个额外的类.alert-info。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-info">
        <a href="#" class="close" data-dismiss="alert">×</a>
        <strong>Note!</strong> Please read the comments carefully.
    </div>
</div>
</body>
</html>

可通过data-dismiss关闭警告框

以下标记用于可关闭的警报框。

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


</head>
  <body style="margin:30px">
    <div class="alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert">×</button>
        Amount  has been transferred successfully.
    </div>
  </body>
</html>

要创建可关闭的警告消息，我们需要将类 alert-dismissable添加到警告框中。
接下来，我们需要一个按钮，单击时将关闭警告消息。按钮应该有data-dismiss属性，它告诉Bootstrap组件单击时关闭。
通过JavaScript关闭警告
 

我们可以通过JavaScript关闭警示。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".close").click(function(){
    $("#myAlert").alert();
  });
});
</script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div class="alert alert-danger" id="myAlert">
        <a href="#" class="close" data-dismiss="alert">×</a>
        <strong>Error!</strong> A problem has been occurred while submitting your data.
    </div>
</div>
</body>
</html>
$().alert()

$().alert()方法封装所有具有关闭功能的警告。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".close").click(function(){
    $("#myAlert").alert();
  });
});  
</script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div id="myAlert" class="alert alert-info">
        <a href="#" class="close" data-dismiss="alert">×</a>
        <strong>Note!</strong> Please read the comments carefully.
    </div>
</div>
</body>
</html>
$().alert('close')

$().alert('close')方法关闭警告消息框。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".close").click(function(){
    $("#myAlert").alert("close");
  });
});  
</script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div id="myAlert" class="alert alert-info">
        <a href="#" class="close">×</a>
        <strong>Note!</strong> Please read the comments carefully.
    </div>
</div>
</body>
</html>

事件

Bootstrap的alert类包括一些事件。
事件 描述
close.bs.alert 在调用close方法时触发。
closed.bs.alert 在警告消息框关闭时触发。它将等待，直到CSS转换过程完成。

以下示例为在完成警告消息框的淡出转换时向用户显示警告消息。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#myAlert").bind("closed.bs.alert", function(){
        alert("Alert message box has been closed.");
    });
});  
</script>
<style type="text/css">
  .bs-example{
    margin: 20px;
  }
</style>
</head>
<body>
<div class="bs-example">
    <div id="myAlert" class="alert alert-info">
        <a href="#" class="close" data-dismiss="alert">×</a>
        <strong>Note!</strong> Please read the comments carefully.
    </div>
</div>
</body>
</html>

2） Bootstrap 分页  

在本章节中，显示如何使用Bootstrap创建分页（Pagination）。
分页通过将内容分成不同的页面来组织内容。

以下代码显示如何创建分页。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="pagination">
        <li><a href="#">&laquo;</a></li>
        <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><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>
</body>
</html>

Disabled和Active状态的分页

分页里面的链接可以定制。

下面的代码显示了如何使用类 .disabled 来使链接不可点击，使用 .active 来表示当前页面。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="pagination">
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>
</body>
</html>

删除点击功能

.disabled 类仅显示已禁用的链接，并且不会删除点击功能。

要删除点击功能，可使用active或disabled的锚点与span交换。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="pagination">
        <li class="disabled"><span>&laquo;</span></li>
        <li class="active"><span>1</span></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>
</body>
</html>

更改分页的大小

要更改分页的大小以增加或减少可点击区域，将相关尺寸的类（如.pagination-lg或.pagination-sm）添加到.pagination基类中。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
  <div>
        <ul class="pagination pagination-lg">
            <li><a href="#">&laquo;</a></li>
            <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><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
    <div>
        <ul class="pagination">
            <li><a href="#">&laquo;</a></li>
            <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><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
    <div>
        <ul class="pagination pagination-sm">
            <li><a href="#">&laquo;</a></li>
            <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><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
</div>
</body>
</html>

翻页（Pager）

要仅显示上一个和下一个链接，请使用类 .pager 。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>
</div>
</body>
</html>

Pager对齐

默认情况下pager是中心对齐的，使用类.previous和.next分别将前一个链接左对齐和下一个链接右对齐。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="pager">
        <li class="previous"><a href="#">&larr; Previous</a></li>
        <li class="next"><a href="#">Next &rarr;</a></li>
    </ul>
</div>
</body>
</html>

禁用Pager

要禁用和标记active到pager，请使用 .disabled 和 .active 类。

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <ul class="pager">
        <li class="previous disabled"><a href="#">&larr; Previous</a></li>
        <li class="next"><a href="#">Next &rarr;</a></li>
    </ul>
</div>
</body>
</html>

----------------------------------------------------------------------  我是低调的分隔线  ----------------------------------------------------------------------

                                                                                                                                   吾欲之南海，一瓶一钵足矣... 

煜9527
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值