前端学习总结：5、Bootstrap

最新推荐文章于 2024-04-23 16:26:38 发布

昵称系统有问题

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量414

点赞数

分类专栏： # 前端开发基础文章标签： bootstrap 前端学习

本文链接：https://blog.csdn.net/weixin_39510813/article/details/125818591

版权

前端开发基础专栏收录该内容

14 篇文章 1 订阅

订阅专栏

前端学习总结：5、Bootstrap

文章目录

1. 前言

bootstrap 是最受欢迎的 HTML、CSS、JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

2. 资料

官网：https://getbootstrap.com/
中文网：https://www.bootcss.com/
阿里网盘转换的 pdf 文档：「converted-Bootstrap3 参考手册.pdf」，点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。链接：https://www.aliyundrive.com/s/QPiAwMUVqF7

3. 下载安装 Bootstrap

从 Bootstrap 中⽂⽹上下载 Bootstrap 的最新版本（https://v3.bootcss.com/）。
Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含⽂档和最初的源代码⽂件。
Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使⽤的是未编译的源代码，您需要编译 LESS ⽂件来⽣成可重⽤的 CSS ⽂件。对于编译 LESS ⽂件，Bootstrap 官⽅只⽀持 Recess，这是 Twitter 的基于 less.js 的 CSS 提⽰。
为了更好的了解和更⽅便的使⽤，我们将在本教程中使⽤ Bootstrap 的预编译版本。
由于⽂件是被编译过和压缩过的，在独⽴的功能开发中，您不必每次都包含这些独⽴的⽂件。
本教程编写时，使⽤的是最新版（Bootstrap 3）。

4. Bootstrap-css 按钮

1.任何带有 class .btn 的元素都会
继承圆⾓灰⾊按钮的默认外观。但是 Bootstrap 提供了⼀些选项来定义按钮的样
式，具体如下表所⽰：
以下样式可⽤于, , 或元素上：
.btn 为按钮添加基本样式
.btn-default 默认/标准按钮
.btn-primary 原始按钮样式（未被操作）
.btn-success表⽰成功的动作
.btn-info 该样式可⽤于要弹出信息的按钮
.btn-warning 表⽰需要谨慎操作的按钮
.btn-danger 表⽰⼀个危险动作的按钮操作
.btn-link 让按钮看起来像个链接 (仍然保留按钮⾏为)
.btn-lg 制作⼀个⼤按钮
.btn-sm 制作⼀个⼩按钮
.btn-xs 制作⼀个超⼩按钮
.btn-block 块级按钮(拉伸⾄⽗元素100%的宽度)
.active 按钮被点击
.disabled 禁⽤按钮

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Bootstrap按钮</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
  </head>
  <body>
    <button type="button">普通按钮</button>
    

    <button type="button" class="btn btn-default">标准按钮</button>

    <button type="button" class="btn btn-primary">原始按钮</button>

    <button type="button" class="btn btn-success">成功按钮</button>

    <button type="button" class="btn btn-info">信息按钮</button>

    <button type="button" class="btn btn-warning">警告按钮</button>

    <button type="button" class="btn btn-danger">危险按钮</button>

    <button type="button" class="btn btn-link">链接按钮</button>
  </body>
</html>

效果：

2.按钮⼤⼩
下表列出了获得各种⼤⼩按钮的 class：
.btn-lg 这会让按钮看起来⽐较⼤。
.btn-sm 这会让按钮看起来⽐较⼩。
.btn-xs 这会让按钮看起来特别⼩。
.btn-block 这会创建块级的按钮，会横跨⽗元素的全部宽度。

3.按钮状态
Bootstrap 提供了激活、禁⽤等按钮状态的 class，下⾯将进⾏详细讲解。
– 激活状态
按钮在激活时将呈现为被按压的外观（深⾊的背景、深⾊的边框、阴影）。
下表列出了让按钮元素和锚元素呈激活状态的 class：
按钮元素添加 .active class 来显⽰它是激活的。
锚元素添加 .active class 到按钮来显⽰它是激活的。

– 禁⽤状态
当您禁⽤⼀个按钮时，它的颜⾊会变淡 50%，并失去渐变。
下表列出了让按钮元素和锚元素呈禁⽤状态的 class：
按钮元素添加 disabled 属性到按钮。
锚元素添加 disabled class 到按钮。
注意：该 class 只会改变的外观，不会改变它的功能。在这⾥，您需要使⽤⾃定义的 JavaScript 来禁⽤链接。

4.按钮标签
您可以在、或元素上使⽤按钮 class。但是建议您在元素上使⽤按钮 class，避免跨浏览器的不⼀致性问题。

5. Bootstrap-css 表格

Bootstrap 提供了⼀个清晰的创建表格的布局。下表列出了 Bootstrap ⽀持的⼀些表格元素：

标签

描述

为表格添加基础样式。

表格标题⾏的容器元素（

表格主体中的表格⾏的容器元素（

⼀组出现在单⾏上的表格单元格的容器元素（

或

）。

默认的表格单元格。

特殊的表格单元格，⽤来标识列或⾏（取决于范围和位置）。必须在

关于表格存储内容的描述或总结。

），⽤来标识表格列。）。内使⽤。

表格类下表样式可⽤于表格中：

类

描述

.table

为任意添加基本样式 (只有横向分隔线)

.table-striped

在

.table-bordered

为所有表格的单元格添加边框

.table-hover

在

.tablecondensed

让表格更加紧凑

内添加斑⻢线形式的条纹 ( IE8 不⽀持) 内的任⼀⾏启⽤⿏标悬停状态类下表的类可⽤于表格的⾏或者单元格：

类	描述
.active	将悬停的颜⾊应⽤在⾏或者单元格上
.success	表⽰成功的操作
.info	表⽰信息变化的操作
.warning	表⽰⼀个警告的操作
.danger	表⽰⼀个危险的操作

1.基本的表格

如果您想要⼀个只带有内边距（padding）和⽔平分割的基本表，请添加 class .table，如下⾯实例所⽰：

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 实例 - 基本的表格</title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/bootstrap.js"></script>
  </head>
  <body>
    <table class="table table-hover table-striped table-condensed">
      <caption>
        基本的表格布局
      </caption>
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

效果如下：

2.可选的表格类

除了基本的表格标记和 .table class，还有⼀些可以⽤来为标记定义样式的类。下⾯将向您介绍这些类。
– 条纹表格通过添加 .table-striped class，您将在内的⾏上看到条纹

– 边框表格通过添加 .table-bordered class，您将看到每个元素周围都有边框，且占整个表格是圆⾓的

– 悬停表格通过添加 _.table-hover _class，当指针悬停在⾏上时会出现浅灰⾊背景

– 精简表格通过添加 .table-condensed class，⾏内边距（padding）被切为两半，以便让表看起来更紧凑

3.上下⽂类

下表中所列出的上下⽂类允许您改变表格⾏或单个单元格的背景颜⾊。

类	描述
.active	对某⼀特定的⾏或单元格应⽤悬停颜⾊
.success	表⽰⼀个成功的或积极的动作
.warning	表⽰⼀个需要注意的警告
.danger	表⽰⼀个危险的或潜在的负⾯动作

4.响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格⽔平滚动以适应⼩型设备（⼩于 768px）。当在⼤于 768px 宽的⼤型设备上查看时，您将看不到任何的差别。

6. Bootstrap-css 图片

Bootstrap 提供了三个可对图⽚应⽤简单样式的 class：
.img-rounded：添加 border-radius:6px 来获得图⽚圆⾓。
.img-circle：添加 border-radius:500px 来让整个图⽚变成圆形。
.img-thumbnail：添加⼀些内边距（padding）和⼀个灰⾊的边框。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>bootstrap图片</title>
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
  </head>
  <body>
    <img src="img/cat.jpg" class="img-rounded" />

    <img src="img/cat.jpg" class="img-circle" />

    <img src="img/cat.jpg" class="img-thumbnail" /> 

  </body>
</html>

〈img〉类
以下类可⽤于任何图⽚中。

类	描述
.img-rounded	为图⽚添加圆⾓ (IE8 不⽀持)
.img-circle	将图⽚变为圆形 (IE8 不⽀持)
.img-thumbnail	缩略图功能
.img-responsive	图⽚响应式 (将很好地扩展到⽗元素)

通过在标签添加 .img-responsive 类来让图⽚⽀持响应式设计。图⽚将很好地扩展到⽗元素。
.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应⽤在图⽚上。

7. Bootstrap-css 网格系统

Bootstrap 提供了⼀套响应式、移动设备优先的流式⽹格系统，随着屏幕或视⼝（viewport）尺⼨的增加，系统会⾃动分为最多 12 列。

在平⾯设计中，⽹格是⼀种由⼀系列⽤于组织内容的相交的直线（垂直的、⽔平的）组成的结构（通常是⼆维的）。它⼴泛应⽤于打印设计中的设计布局和内容结构。在⽹⻚设计中，它是⼀种⽤于快速创建⼀致的布局和有效地使⽤ HTML 和 CSS 的⽅法。

简单地说，⽹⻚设计中的⽹格⽤于组织内容，让⽹站易于浏览，并降低⽤⼾端的负载。
Bootstrap 包含了⼀个响应式的、移动设备优先的、不固定的⽹格系统，可以随着设备或视⼝⼤⼩的增加⽽适当地扩展到 12 列。它包含了⽤于简单的布局选项的预定义类，也包含了⽤于⽣成更多语义布局的功能强⼤的混合类。

让我们来理解⼀下上⾯的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从⼩屏幕设备（⽐如移动设备、平板电脑）开始，然后扩展到⼤屏幕设备（⽐如笔记本电脑、台式电脑）上的组件和⽹格。

8. Bootstrap-css 表单

Bootstrap 提供了下列类型的表单布局：垂直表单（默认）、内联表单、⽔平表单。

垂直或基本表单

基本的表单结构是 Bootstrap ⾃带的，个别的表单控件⾃动接收⼀些全局样式。下⾯列出了创建基本表单的步骤：

向⽗  元素添加 role="form"。

把标签和控件放在⼀个带有 class .form-group 的中。这是获取最佳 间距所必需的。

向所有的⽂本元素 、 和 <select> 添加 class .formcontrol。</div>

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 实例 - 基本表单</title>
    <link
      rel="stylesheet"
      href="http://apps.bdimg.com/libs/boot
                                 strap/3.3.0/css/bootstrap.min.css"
    />
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.
                 min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/b
                 ootstrap.min.js"></script>
  </head>
  <body>
    <form role="form">
      <div class="form-group">
        <label for="name">名称</label>
        <input
          type="text"
          class="form-control"
          id="name"
          placeholder="请输⼊名称"
        />
      </div>
      <div class="form-group">
        <label for="inputfile">⽂件输⼊</label>
        <input type="file" id="inputfile" />
        <p class="help-block">这⾥是块级帮助⽂本的实例。</p>
      </div>
      <div class="checkbox">
        <label> <input type="checkbox" /> 请打勾 </label>
      </div>
      <button type="submit" class="btn btn-default">提交</button>
    </form>
  </body>
</html>

内联表单
如果需要创建⼀个表单，它的所有元素是内联的，向左对⻬的，标签是并排的，请向标签添加 class .form-inline。

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 内联表单</title>
		<link rel="stylesheet" href="http://apps.bdimg.com/libs/boot
strap/3.3.0/css/bootstrap.min.css">
		<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.
min.js"></script>
		<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/b
ootstrap.min.js"></script>
	</head>
	<body>
		<form class="form-inline" role="form">
			<div class="form-group">
				<label class="sr-only" for="name">名称</label>
				<input type="text" class="form-control" id="name" placeholder="请输⼊名称">
			</div>
			<div class="form-group">
				<label class="sr-only" for="inputfile">⽂件输⼊</label>
				<input type="file" id="inputfile">
			</div>
			<div class="checkbox">
				<label>
					<input type="checkbox"> 请打勾
				</label>
			</div>
			<button type="submit" class="btn btn-default">提交</button>
		</form>
	</body>
</html>

⽔平表单
⽔平表单与其他表单不仅标记的数量上不同，⽽且表单的呈现形式也不同。如需创建⼀个⽔平布局的表单，请按下⾯的⼏个步骤进⾏：

向⽗ <form> 元素添加 class .form-horizontal。
把标签和控件放在⼀个带有 class .form-group 的 <div> 中。
向标签添加 class .control-label。

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 实例 - ⽔平表单</title>
    <link
      rel="stylesheet"
      href="http://apps.bdimg.com/libs/boot
                                 strap/3.3.0/css/bootstrap.min.css"
    />
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.
                 min.js"></script>
    <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/b
                 ootstrap.min.js"></script>
  </head>
  <body>
    <form class="form-horizontal" role="form">
      <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">名字 </label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            id="firstname"
            placeholder="请输⼊名字"
          />
        </div>
      </div>
      <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">姓</label>
        <div class="col-sm-10">
          <input
            type="text"
            class="form-control"
            id="lastname"
            placeholder="请输⼊姓"
          />
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label> <input type="checkbox" /> 请记住我 </label>
          </div>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-default">登录</button>
        </div>
      </div>
    </form>
  </body>
</html>

⽀持的表单控件 Bootstrap ⽀持最常⻅的表单控件，主要是 input、textarea、checkbox、radio 和 select。

9. BootStrap-css 辅助类

1.⽂本

以下不同的类展⽰了不同的⽂本颜⾊。如果⽂本是个链接⿏标移动到⽂本上会变暗：
.text-muted “text-muted” 类的⽂本样式
.text-primary “text-primary” 类的⽂本样式
.textsuccess “text-success” 类的⽂本样式
.text-info “text-info” 类的⽂本样式
.textwarning “text-warning” 类的⽂本样式
.text-danger “text-danger” 类的⽂本样式

2.背景

以下不同的类展⽰了不同的背景颜⾊。如果⽂本是个链接⿏标移动到⽂本上会变暗：
.bg-primary 表格单元格使⽤了 “bg-primary” 类
.bg-success 表格单元格使⽤了 “bg-success” 类
.bg-info 表格单元格使⽤了 “bg-info” 类
.bg-warning 表格单元格使⽤了 “bg-warning” 类
.bg-danger 表格单元格使⽤了 “bg-danger” 类

3.其他

.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.center-block设置元素为 display:block 并居中显⽰
.clearfix 清除浮动 .show 强制元素显⽰
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素
.sr-onlyfocusable 与 .sr-only 类结合使⽤，在元素获取焦点时显⽰(如：键盘操作的⽤⼾)
.text-hide 将⻚⾯元素所包含的⽂本内容替换为背景图
.close 显⽰关闭按钮
.caret 显⽰下拉式功能

10. BootStrap-布局组件-导航栏

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

1.默认的导航栏
创建⼀个默认的导航栏的步骤如下：

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

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 实例 - 默认的导航栏</title>
    <link
      href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  </head>
  <body>
    <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">W3Cschool</a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">iOS</a></li>
          <li><a href="#">SVN</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              Java
              <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
              <li><a href="#">jmeter</a></li>
              <li><a href="#">EJB</a></li>
              <li><a href="#">Jasper Report</a></li>
              <li class="divider"></li>
              <li><a href="#">分离的链接</a></li>
              <li class="divider"></li>
              <li><a href="#">另一个分离的链接</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
  </body>
</html>

效果：

2.响应式的导航栏
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的
中。折叠起来的导航栏实际上是⼀个带有 class .navbar-toggle 及两个 data- 元素的按钮。第⼀个是 data-toggle，⽤于告诉 JavaScript 需要对按钮做什么，第⼆个是 data-target，指⽰要切换到哪⼀个元素。三个带有 class .icon-bar的创建所谓的汉堡按钮。这些会切换为 .nav-collapse
中的元素。为了实现以上这些功能，您必须包含Bootstrap 折叠（Collapse）插件。
3.导航栏中的表单
导航栏中的表单不是使⽤ Bootstrap 表单章节中所讲到的默认的 class，它是使⽤ .navbar-form class。这确保了表单适当的垂直对⻬和在较窄的视⼝中折叠的⾏为。使⽤对⻬⽅式选项（这将在组件对⻬⽅式部分进⾏详细讲解）来决定导航栏中的内容放置在哪⾥。
4.导航栏中的按钮
您可以使⽤ class .navbar-btn 向不在中的元素添加按钮，按钮在导航栏上垂直居中。.navbar-btn 可被使⽤在和元素上。
不要在 .navbar-nav 内的元素上使⽤.navbarbtn，因为它不是标准的 button class。
5.导航栏中的⽂本
如果需要在导航中包含⽂本字符串，请使⽤ class .navbar-text。这通常与
标签⼀起使⽤，确保适当的前导和颜⾊。
6.⾮导航链接
如果您不想在常规的导航栏导航组件内使⽤标准的链接，那么请使⽤ class navbar-link 来为默认的和倒转的导航栏选项添加适当的颜⾊。
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），内边距的值可以根据您的需要进⾏设置。

11. BootStrap-布局组件-警告框

警告（Alerts）向⽤⼾提供了⼀种定义消息样式的⽅式。它们为典型的⽤⼾操作提供了上下⽂信息反馈。

您可以为警告框添加⼀个可选的关闭按钮。为了创建⼀个内联的可取消的警告框，请使⽤警告（Alerts） jQuery 插件。

您可以通过创建⼀个

，并向其添加⼀个 .alert class 和四个上下⽂ class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之⼀，来添加⼀个基本的警告框。

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 警告（Alerts）</title>
		<link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="alert alert-success">成功！很好地完成了提交。</div>
		<div class="alert alert-info">信息！请注意这个信息。</div>
		<div class="alert alert-warning">警告！请不要提交。</div>
		<div class="alert alert-danger">错误！请进行一些更改。</div>
	</body>
</html>

效果：

12. BootStrap-布局组件-进度条

Bootstrap 进度条使⽤ CSS3 过渡和动画来获得该效果。
Internet Explorer 9 及之前的版本和旧版的 Firefox 不⽀持该特性，Opera 12 不⽀持动画。

1. 默认的进度条

创建⼀个基本的进度条的步骤如下：
添加⼀个带有 class .progress 的

。
接着，在上⾯的

内，添加⼀个带有 class .progress-bar 的空的

。
添加⼀个带有百分⽐表⽰的宽度的 style 属性，例如 style=“60%”; 表⽰进度条在 60% 的位置。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 实例 - 进度条</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
                <span class="sr-only">40% 完成</span>
            </div>
        </div>
    </body>
</html>

2.交替的进度条

创建不同样式的进度条的步骤如下：
添加⼀个带有 class .progress 的

接着，在上⾯的

内，添加⼀个带有 class .progress-bar 和 class progress-bar-* 的空的

。其中，* 可以是 success、info、 warning、danger。
添加⼀个带有百分⽐表⽰的宽度的 style 属性，例如 style=“60%”; 表⽰进度条在 60% 的位置。

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 交替的进度条</title>
		<link href="./css/bootstrap.min.css" rel="stylesheet">
		<script src="./jquery.min.js"></script>
		<script src="./js/bootstrap.min.js"></script>
		<!-- <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> -->
		<!-- <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->
		<!-- <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> -->
	</head>
	<body>
		<div class="progress">
			<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
				<span class="sr-only">90% 完成（成功）</span>
			</div>
		</div>
		<div class="progress">
			<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>
		<div class="progress">
			<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>
		<div class="progress">
			<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
				<span class="sr-only">10% 完成（危险）</span>
			</div>
		</div>
	</body>
</html>

效果：

1. 条纹的进度条

创建⼀个条纹的进度条的步骤如下：
添加⼀个带有 class .progress 和 .progress-striped 的

接着，在上⾯的

内，添加⼀个带有 class .progress-bar 和 class progress-bar-* 的空的

。其中，* 可以是 success、info、 warning、danger。
添加⼀个带有百分⽐表⽰的宽度的 style 属性，例如 style=“60%”; 表⽰进度条在 60% 的位置。

4.动画的进度条

创建⼀个动画的进度条的步骤如下：
添加⼀个带有 class .progress 和 .progress-striped 的

。同时添加 class .active。
接着，在上⾯的

内，添加⼀个带有 class .progress-bar 的空的

。
添加⼀个带有百分⽐表⽰的宽度的 style 属性，例如 style=“60%”; 表⽰进度条在 60% 的位置。
这将会使条纹具有从右向左的运动感。

5.堆叠的进度条

您甚⾄可以堆叠多个进度条。把多个进度条放在相同的 .progress 中即可实现堆叠

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 堆叠的进度条</title>
		<link href="./css/bootstrap.min.css" rel="stylesheet">
		<script src=".js//jquery.min.js"></script>
		<script src="./js/bootstrap.min.js"></script>
	</head>
	<body>
		<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>
	</body>
</html>

13. BootStrap-布局组件-分页

分⻚（Pagination），是⼀种⽆序列表，Bootstrap 像处理其他界⾯元素⼀样处理分⻚。
下表列出了 Bootstrap 提供的处理分⻚的 class。

Class	描述	⽰例代码
.pagination	添加该 class 来在⻚⾯上显⽰分⻚。	```html

&l aquo;
1
.......

``` | | .disabled, .active | 您可以⾃定义链接，通过使⽤ .disabled 来定义不可点击的链接，通过使⽤ .active 来指⽰当前的⻚⾯。 | ```html

``` | | .paginationlg, .paginationsm | 使⽤这些 class 来获取不同⼤⼩的项。 | ```html

``` |

1.默认的分

下⾯的实例演⽰了上表中所讨论的 class .pagination 的⽤法：

<!DOCTYPE html>
<html>
	<head>
		<title>Bootstrap 实例 - 默认的分⻚</title>
		<link href="./css/bootstrap.min.css" rel="stylesheet">
		<script src="./js/jquery.min.js"></script>
		<script src="./js/bootstrap.min.js"></script>
	</head>
	<body>
		<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>
	</body>
</html>

效果：

2.分⻚的状态

下⾯的实例演⽰了上表中所讨论的 class .disabled、.active 的⽤法：

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 实例 - 分⻚的状态</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
    </head>
    <body>
        <ul class="pagination">
            <li><a href="#">&laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li class="disabled"><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>
    </body>
</html>

3.分⻚的⼤⼩

下⾯的实例演⽰了上表中所讨论的 class .pagination-* 的⽤法：

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 实例 - 分⻚的⼤⼩</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
    </head>
    <body>
        <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><br>
        <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><br>
        <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>
    </body>
</html>

1. 翻⻚（Pager）

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

Class	描述	⽰例代码
.pager	添加该 class 来获得翻⻚链接。	```html

–默认的翻⻚
下⾯的实例演⽰了上表中所讨论的 class .pager 的⽤法：

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 实例 - 默认的翻⻚</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
    </head>
    <body>
        <ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
        </ul>
    </body>
</html>

– 对⻬的链接
下⾯的实例演⽰了上表中所讨论的 class .previous、.next 的⽤法：

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 实例 - 翻⻚中对⻬的链接</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
    </head>
    <body>
        <ul class="pager">
            <li class="previous"><a href="#">&larr; Older</a></li>
            <li class="next"><a href="#">Newer &rarr;</a></li>
        </ul>
    </body>
</html>

– 翻⻚的状态
下⾯的实例演⽰了上表中所讨论的 class .disabled 的⽤法：

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 实例 - 翻⻚的状态</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
    </head>
    <body>
        <ul class="pager">
            <li class="previous disabled"><a href="#">&larr; Older</a></l i>
            <li class="next"><a href="#">Newer &rarr;</a></li>
        </ul>
    </body>
</html>

14. BootStrap-布局组件-字体图标

Bootstrap 捆绑了 200 多种字体格式的字形。⾸先让我们先来理解⼀下什么是字体图标。
字体图标是在 Web 项⽬中使⽤的图标字体。虽然，Glyphicons Halflings 需要商业许可，但是您可以通过基于项⽬的 Bootstrap 来免费使⽤这些图标。为了表⽰对图标作者的感谢，希望您在使⽤时加上 GLYPHICONS ⽹站的链接。
获取字体图标我们已经在环境安装章节下载了 Bootstrap 3.x 版本，并理解了它的⽬录结构。在 fonts ⽂件夹内可以找到字体图标，它包含了下列这些⽂件：
glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff

1.CSS 规则解释

下⾯的 CSS 规则构成 glyphicon class。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded
    -opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('wof f'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url
    ('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') forma t('svg');
    }

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

所以 font-face 规则实际上是在找到 glyphicons 地⽅声明 font-family 和位置。
.glyphicon class 声明⼀个从顶部偏移 1px 的相对位置，呈现为 inline-block，声明字体，规定 fontstyle 和 font-weight 为 normal，设置⾏⾼为 1。除此之外，使⽤ -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的⼀致性。
然后，这⾥的

.glyphicon:empty {
  width: 1em;
}

是空的 glyphicon。
这⾥有 200 个 class，每个 class 针对⼀个图标。这些 class 的常⻅格式如下：

.glyphicon-keyword:before {
  content: "hexvalue";
}

⽐如，使⽤的 user 图标，它的 class 如下：

.glyphicon-user:before {
  content: "\e008";
}

1. ⽤法

如需使⽤图标，只需要简单地使⽤下⾯的代码即可。请在图标和⽂本之间保留适当的空间。

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

下⾯的实例演⽰了如何使⽤字体图标：

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 实例 - 如何使⽤字体图标</title>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <script src="./js/jquery.min.js"></script>
        <script src="./js/bootstrap.min.js"></script>
    </head>
    <body>
        <p>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-sort-by-attributes"></span>
            </button>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
            </button>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-sort-by-order"></span>
            </button>
            <button type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-sort-by-order-alt"></span>
            </button>
        </p>
        <button type="button" class="btn btn-default btn-lg">
            <span class="glyphicon glyphicon-user"></span> User
        </button>
        <button type="button" class="btn btn-default btn-sm">
            <span class="glyphicon glyphicon-user"></span> User
        </button>
        <button type="button" class="btn btn-default btn-xs">
            <span class="glyphicon glyphicon-user"></span> User
        </button>
    </body>
</html>

1. 带有导航栏的字体图标

<!DOCTYPE html>
<html>
    <head>
        <title>导航栏的字形图标</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <style>
            body {
                padding-top: 50px;
                padding-left: 50px;
            }
        </style>
        <!--[if lt IE 9]>
      <script src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
    </head>
    <body>
        <div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Project name</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
                        <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
                        <li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
                    </ul>
                </div><!-- /.nav-collapse -->
            </div><!-- /.container -->
        </div>
        <!-- jQuery (Bootstrap 插件需要引入) -->
        <script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
        <!-- 包含了所有编译插件 -->
        <script src="https://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    </body>
</html>

4.定制字体图标

我们已经看到如何使⽤字体图标，接下来我们看看如何定制字体图标。我们将以上⾯的实例开始，并通过改变字体尺⼨、颜⾊和应⽤⽂本阴影来进⾏定制图标。下⾯是开始的代码：

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

1. 定制字体尺⼨

通过增加或减少图标的字体尺⼨，您可以让图标看起来更⼤或更⼩。

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

1. 定制字体颜⾊

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 10
                                                            6, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>

1. 应⽤⽂本阴影

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: blac
k 5px 3px 3px;">
 <span class="glyphicon glyphicon-user"></span> User
</button>

15. Bootstrap-插件-轮播

Bootstrap 轮播（Carousel）插件是⼀种灵活的响应式的向站点添加滑块的⽅式。除此之外，内容也是⾜够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
如果您想要单独引⽤该插件的功能，那么您需要引⽤ carousel.js。或者，正如 Bootstrap 插件概览⼀章中所提到，您可以引⽤ bootstrap.js 或压缩版的 bootstrap.min.js。
下⾯是⼀个简单的幻灯⽚，使⽤ Bootstrap 轮播（Carousel）插件显⽰了⼀个循环播放元素的通⽤组件。为了实现轮播，您只需要添加带有该标记的代码即可。不需要使⽤ data 属性，只需要简单的基于 class 的开发即可。

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</title>
        <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="./img/slide1.png" alt="First slide">
                </div>
                <div class="item">
                    <img src="./img/slide2.png" alt="Second slide">
                </div>
                <div class="item">
                    <img src="./img/slide3.png" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>

    </body>
</html>

可选的标题

您可以通过 .item 内的 .carousel-caption 元素向幻灯⽚添加标题。只需要在该处放置任何可选的 HTML 即可，它会⾃动对⻬并格式化。

⽤法

– 通过 data 属性：使⽤ data 属性可以很容易控制轮播（Carousel）的位置。
– 属性 data-slide 接受关键字 prev 或 next，⽤来改变幻灯⽚相对于当前位置的位置。
– 使⽤ data-slide-to 来向轮播床底⼀个原始滑动索引，data-slideto=“2” 将把滑块移动到⼀个特定的索引，索引从 0 开始计数。
– data-ride=“carousel” 属性⽤于标记轮播在⻚⾯加载时就开始动画播放。
– 通过 JavaScript：轮播（Carousel）可通过 JavaScript ⼿动调⽤，如下所⽰：

$('.carousel').carousel()

选项

有⼀些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称	类型/默认值	Data 属性名称	描述
interval	number 默认值： 5000	data-interval	⾃动循环每个项⽬之间延迟的时间量。
pause	string 默认值：“hover”	data-pause	⿏标进⼊时暂停轮播循环，⿏标离开时恢复轮播循环。
wrap	boolean 默认值： true	data-wrap	轮播是否连续循环。如果为 false，轮播将不会⾃动循环。

方法

下⾯是⼀些轮播（Carousel）插件中有⽤的⽅法：

⽅法	描述	实例
.carousel(options)	初始化轮播为可选的 options 对象，并开始循环项⽬。	```javascript
$('#identifie
r’).carousel({
interval: 200
0
})

 |
|  .carousel('cycle')   |  从左到右循环轮播项⽬。   | ```javascript
$('#identifie
r').carousel('c
ycle')

|
| .carousel(‘pause’) | 停⽌轮播循环项⽬。 | ```javascript
$(‘#identifie
r’)…carousel
(‘pause’)

 |
|  .carousel(number)   |  循环轮播到某个特定的帧 （从 0 开始计数，与数组 类似）。   | ```javascript
$('#identifie
r').carousel(nu
mber)

|
| .carousel(‘prev’) | 循环轮播到上⼀个项⽬。 | ```javascript
$(‘#identifie
r’).carousel(‘p
rev’)

 |
|  .carousel('next')   |  循环轮播到下⼀个项⽬。   | ```javascript
$('#identifie
r').carousel('n
ext')

实例

下⾯的实例演⽰了⽅法的⽤法：

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 实例 - 轮播（Carousel）插件⽅法</title>
        <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项⽬ -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/slide1.png" alt="First slide">
                </div>
                <div class="item">
                    <img src="./img/slide2.png" alt="Second slide">
                </div>
                <div class="item">
                    <img src="./img/slide3.png" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            <!-- 控制按钮 -->
            <div style="text-align:center;">
                <input type="button" class="btn start-slide" value="Star
 t">
                <input type="button" class="btn pause-slide" value="Paus
 e">
                <input type="button" class="btn prev-slide" value="Previo
 us Slide">
                <input type="button" class="btn next-slide" value="Next S
 lide">
                <input type="button" class="btn slide-one" value="Slid
 e 1">
                <input type="button" class="btn slide-two" value="Slid
  e 2">
                <input type="button" class="btn slide-three" value="Slid
  e 3">
            </div>
        </div>
        <script>
            $(function() {
                // 初始化轮播
                $(".start-slide").click(function() {
                    $("#myCarousel").carousel('cycle');
                });
                // 停⽌轮播
                $(".pause-slide").click(function() {
                    $("#myCarousel").carousel('pause');
                });
                // 循环轮播到上⼀个项⽬
                $(".prev-slide").click(function() {
                    $("#myCarousel").carousel('prev');
                });
                // 循环轮播到下⼀个项⽬
                $(".next-slide").click(function() {
                    $("#myCarousel").carousel('next');
                });
                // 循环轮播到某个特定的帧
                $(".slide-one").click(function() {
                    $("#myCarousel").carousel(0);
                });
                $(".slide-two").click(function() {
                    $("#myCarousel").carousel(1);
                });
                $(".slide-three").click(function() {
                    $("#myCarousel").carousel(2);
                });
            });
        </script>
    </body>
</html>

事件

下表列出了轮播（Carousel）插件中要⽤到的事件。这些事件可在函数中当钩⼦使⽤。

事件	描述	实例
slide.bs.carousel	当调⽤ slide 实例⽅法时⽴即触发该事件。	```javascript
$(‘#identifier’).on('sl
ide.bs.carousel’, funct
ion () {
// 执⾏⼀些动作…
})

 |
|  slid.bs.carousel   |  当轮播完成幻灯⽚ 过渡效果时触发该 事件。   | ```javascript
$('#identifier').on('sl
id.bs.carousel', functi
on () {
// 执⾏⼀些动作...
})

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 实例 - 轮播（Carousel）插件事件</title>
        <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项⽬ -->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="./img/slide1.png" alt="First slide">
                </div>
                <div class="item">
                    <img src="./img/slide2.png" alt="Second slide">
                </div>
                <div class="item">
                    <img src="./img/slide3.png" alt="Third slide">
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
            <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
        <script>
            $(function() {
                $('#myCarousel').on('slide.bs.carousel', function() {
                    alert("当调⽤ slide 实例⽅法时⽴即触发该事件。");
                });
            });
        </script>
    </body>
</html>

16. Bootstrap-插件-模态对话框

模态框（Modal）是覆盖在⽗窗体上的⼦窗体。通常，⽬的是显⽰来⾃⼀个单独的源的内容，可以在不离开⽗窗体的情况下有⼀些互动。⼦窗体可提供信息、交互等。

用法

您可以切换模态框（Modal）插件的隐藏内容：
– 通过 data 属性：在控制器元素（⽐如按钮或者链接）上设置属性 datatoggle=“modal”，同时设置 data-target=“#identifier” 或 href=“#identifier” 来指定要切换的特定的模态框（带有 id=“identifier”）。
– 通过 JavaScript：使⽤这种技术，您可以通过简单的⼀⾏ JavaScript 来调⽤带有 id=“identifier” 的模态框：

$('#identifier').modal(options)

实例：
⼀个静态的模态窗⼝实例，如下⾯的实例所⽰：

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap 实例 - 模态框（Modal）插件</title>
        <link href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    </head>
    <body>
        <h2>创建模态框（Modal）</h2>
        <!-- 按钮触发模态框 -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            开始演⽰模态框
        </button>
        <!-- 模态框（Modal） -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialo
g" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                            模态框（Modal）标题
                        </h4>
                    </div>
                    <div class="modal-body">
                        在这⾥添加⼀些⽂本
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-primary">
                            提交更改
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
    </body>
</html>

选项

有⼀些选项可以⽤来定制模态窗⼝（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

选项名称	类型/默认值	Data 属性名称	描述
backdrop	boolean 或 string ‘static’ 默认值： true	data-backdrop	指定⼀个静态的背景，当⽤⼾点击模态框外部时不会关闭模态框。
keyboard	boolean 默认值： true	data-keyboard	当按下 escape 键时关闭模态框，设置为 false 时则按键⽆效。
show	boolean 默认值： true	data-show	当初始化时显⽰模态框。
remote	path 默认值： false	data-remote	使⽤ jQuery .load ⽅法，为模态框的主体注⼊内容。如果添加了⼀个带有有效 URL 的 href，则会加载其中的内容。

方法

下⾯是⼀些可与 modal() ⼀起使⽤的有⽤的⽅法。

⽅法	描述	实例
Options: .modal(options)	把内容作为模态框激活。接受⼀个可选的选项对象。	$(‘#identifie r’).modal({ keyboard: false })
Toggle: .modal(‘toggle’)	⼿动切换模态框。	$(‘#identifie r’).modal(‘toggl e’)
Show: .modal(‘show’)	⼿动打开模态框。	$(‘#identifie r’).modal(‘sho w’)
Hide: .modal(‘hide’)	⼿动隐藏模态框。	$(‘#identifie r’).modal(‘hid e’)

事件

下表列出了模态框中要⽤到事件。这些事件可在函数中当钩⼦使⽤。

事件	描述	实例
show.bs.modal	在调⽤ show ⽅法后触发。	$(‘#identifier’).on (‘show.bs.modal’, f unction () { // 执⾏⼀些动作… })
shown.bs.modal	当模态框对⽤⼾可⻅时触发（将等待 CSS 过渡效果完成）。	$(‘#identifier’).on (‘shown.bs.moda l’, function () { // 执⾏⼀些动作… })
hide.bs.modal	当调⽤ hide 实例⽅法时触发。	$(‘#identifier’).on (‘hide.bs.modal’, f unction () { // 执⾏⼀些动作… })
hidden.bs.modal	当模态框完全对⽤⼾隐藏时触发。	$(‘#identifier’).on (‘hidden.bs.moda l’, function () { // 执⾏⼀些动作… })

最后

其实这些框架在我看来就像c/c++/go/java/python等的库或包一样将一些可以复用的东西做了封装，设计的时候就像积木一样复用性设计的很好（这给了我们设计组件和库的一个基本要求，做到复用才能用在多个项目中，并且抽象复用到一定程度就成了框架了，很多项目直接套用现成的框架，只实现业务就可以了），很方便我们调用和组合，而目前我们要做的就是可以自己开发一些需要的库，也可以用已有的库开发我们需要的软件，不必拘泥于死记硬背接口，使用的多了自然就熟悉了。

昵称系统有问题

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习总结：5、Bootstrap

bootstrap 是最受欢迎的 HTML、CSS、JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。官网：https://getbootstrap.com/中文网：https://www.bootcss.com/阿里网盘转换的 pdf 文档：「converted-Bootstrap3 参考手册.pdf」，点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。链接：https://www.aliyundrive.com/s/QPiAwMUVqF7
复制链接

扫一扫