5. 前端开发工程师 - Bootstrap(5天).pptx

1、前端开发工程师 Bootstrap,Bootstrap是目前最受欢迎的前端框架，基于 Html、CSS、Javascript，它简洁灵活，使得 Web 开发更加快捷。,前端开发工程师 Bootstrap Day1,1. Bootstrap简介,Bootstrap是Twitter推出的一款易用、优雅、灵活、可扩展的基于CSS/HTML的前端开发框架。涌现了许多基于Bootstrap建设的网站：界面清新、简洁，要素排版利落大方。如下图所示：,特点,特点及优势：简洁、清新、美观的界面 丰富的组件 丰富的页面模版 兼容绝大部分浏览器及不同版本（支持IE6） 支持响应式开发（如：平板电脑、手机、Andr

2、oid、IOS等） 丰富的基于Bootstrap开源项目（如：Layoutit、FormBuilder）,结构,基本结构：提供了一个带有网格系统、链接样式、背景的基本结构。 CSS：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class。 组件：十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。 JavaScript 插件：十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。,2. Bootstrap环境安装,下载Bo

3、otstrap：可以从 http:/ 上下载 Bootstrap 的最新版本。当您点击这个链接时，您将看到如下所示的网页：,Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。 Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。,预编译的Bootstrap,下载预编译版本，解压ZIP文件，看到下面的文件/目录结果：,bootstrap/|- css

4、/ （内置各种样式）| |- bootstrap.css| |- bootstrap.min.css| |- bootstrap-theme.css| |- bootstrap-theme.min.css|- js/ （内置各种组件、事件）| |- bootstrap.js| |- bootstrap.min.js|- img/ （各种图片、图标）| |- glyphicons-halflings-white.png| |- glyphicons-halflings.png,Bootstrap源码,下载Bootstrap源码，看到下面的文件/目录结果：,less/、js/ 和 fonts/ 下

5、的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。 dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。 docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。,Bootstrap模版,下载Bootstrap源码，看到下面的文件/目录结果：,3. 可视化布局（Layoutit）,所谓可视化布局就是可以通过拖拽的方式进行页面的布局，这样的好处在于可以即时的看到最终页面的效果，不需要编写任何的代码。 下面我们将用可视化布局工具Layoutit通过拖拽的方式生成页面，下面是一个Layoutit的操作界面：,Layouti

6、t,在正式演示Layoutit可视化布局工具之前，先请大家看一段视频，希望大家通过视频中对layoutit的操作演示，能对这个神奇的工具产生兴趣。 视频位置：video/bootstrap/LayoutIt Video.mp4同时，看完这段视频之后，我们将使用layoutit生成一些实际的页面，这些页面会模仿现有网站上的一些页面（登录、门户首页），具体页面看下面。,登录,门户首页,4. 实例实践操作（作业）,今天主要讲解了Bootstrap的基本概念、安装、模版以及基于bootstrap的可视化布局工具Layoutit。所以今天的任务就是：下载安装Bootstrap预编译版 熟悉Bootstr

7、ap预编译版的目录结构 使用Layoutit可视化布局工具生成两个页面（登录、网站首页）并运行,前端开发工程师 Bootstrap Day2,1. Bootstrap CSS概览,Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。因此，请在使用 Bootstrap 项目的开头包含下面的代码段。如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），您可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于您的代码不能通过 W3C 标准的验证。,移动

8、设备优先（响应式）,Bootstrap3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：width属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为device-width将确保它能正确呈现在不同设备上。 initial-scale=1.0确保网页加载时，以1:1的比例呈现，不会有任何的缩放。,浏览器/设备支持,Bootstrap 可以在最新的

9、桌面系统和移动端浏览器中很好的工作。旧的浏览器可能无法很好的支持。下表为 Bootstrap 支持最新版本的浏览器和平台：,2. Bootstrap全局CSS样式,Bootstrap提供了全局的CSS样式，基本的HTML元素均可以通过class设置样式：网格系统 排版 代码 表格 表单 按钮 图像 帮助类,全局CSS - 网格系统,Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。默认的Bootstrap格网系统提供一个宽达940像素的，12列的格网。Bootstrap能够使得你的网页可以更好地适应多种终端

10、设备(平板电脑，智能手机等)。,网格系统 - 用法,如何使用Bootstrap的网格系统，适应不同的设备：,网格系统 - 示例代码,现在，给我们提供了 3 中不同的列布局，分别适用于三种设备。在手机上，它将是左边 25% 右边 75% 的布局。在平板电脑上，它将是 50%/50% 的布局。在大型视口的设备上，它将是 33%/66% 的布局。请查看下面的实例进行验证。（在这里，为每个列分别定义了样式，您可以避免这么做。）,示例代码：demo/bootstrap/day2/2/网格系统,全局CSS - 排版,Bootstrap提供了一系列用于页面排版的内置样式，其中包括：标题、页面主体、内联文本元

11、素、对齐、字体大小、缩略、地址、引用、列表等。我们可以直接使用内置的class样式生成统一规范的页面。,排版 - 示例代码,下面我们将通过具体的代码演示分析来详细说明Bootstrap的排版功能。,示例代码：demo/bootstrap/day2/2/排版,全局CSS - 代码,Bootstrap 允许您以两种方式显示代码：第一种是标签。如果您想要内联显示代码，那么您应该使用 标签。 第二种是标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 标签。,示例代码：demo/bootstrap/day2/2/代码,全局CSS - 表格,Bootstrap 提供了一个清晰的创建

12、表格的布局。下表列出了 Bootstrap 支持的一些表格元素：,表格 用法,Bootstrap其提供了一些内置的样式用于控制表格的边框（圆角等）、样式（紧凑型等）、结构以及每行的样式、事件（每行显示不同颜色，鼠标悬浮等）。,示例代码：demo/bootstrap/day2/2/表格,全局CSS - 表单,Bootstrap 提供了下列类型的表单布局：垂直表单（默认） 内联表单 水平表单,示例代码：demo/bootstrap/day2/2/表单,全局CSS - 表单控件,Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 sele

13、ct。,示例代码：demo/bootstrap/day2/2/表单控件,全局CSS - 按钮,Bootstrap提供多种样式的按钮，同样是通过CSS的类来控制，包括btn, btn-primary， btn-info ， btn-success等不同颜色的按钮，亦可以简单通过.btn-large .btn-mini等CSS的class控制按钮大小，能够同时用在，标签上。,示例代码：demo/bootstrap/day2/2/按钮,全局CSS - 图像,Bootstrap 提供了三个可对图像应用简单样式的 class：.img-rounded：添加 border-radius:6px 来获得图像

14、圆角。 .img-circle：添加 border-radius:500px 来让整个图像变成圆形。 .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。,示例代码：demo/bootstrap/day2/2/图像,全局CSS - 帮助类,Bootstrap除了提供基本的网页元素外，还提供了很多帮助类，用于提高网页的质量及效率。比如：关闭图标 插入符 浮动 显示隐藏内容 屏幕阅读器,示例代码：demo/bootstrap/day2/2/图像,3. 实例实践操作（作业）/ TODO,今天主要对Bootstrap全局CSS样式进行了讲解，其中设计到很多全局的样式，所有课

15、后需要大家勤加联系，对各个属性进行实践操作查看实际效果，感兴趣的可以找到对于的样式，看看bootstrap是如何实现的。对以后使用bootstrap进行实际开发会有很大帮助。任务：体会响应式布局的效果 做1-2个页面包含今天讲到的大部分全局CSS,前端开发工程师 Bootstrap Day3,1. Bootstrap布局组件概览,Bootstrap的强大之处不在于提供了前面所说的样式，而是在于其提供了很多工具类，让我们的前端开发变得快捷、高效。开发出来的页面清新、美观。下面几种工具类：按钮（按钮组、按钮式下拉菜单、按钮式上拉菜单） 导航（轻量导航、导航条、面包屑导航、分页） 标签（Label）

16、、徽章、缩略图 提醒（Alerts）、进度条（Processer Bar）、杂项 模态窗口（Modals）、滚动监控、标签效果、提示效果（Tooltip）、“泡芙”效果,布局组件展示,多种风格的轻量导航,列表与下拉导航,布局组件展示,导航条,面包屑导航,多种风格分页,布局组件展示,标签与徽章,缩略图,2. Bootstrap布局组件详解,接下来我们将逐一的对Bootstrap布局组件的用法进行详细的讲解，同时将通过示例演示、代码分析的方法让大家对布局组件的使用有一个大概的了解。,布局组件 字形图标,字形图标（Glyphicons）是在 Web 项目中使用的图标字体。我们已经在 环境安装 章节下

17、载了 Bootstrap 3.x 版本，并理解了它的目录结构。在 fonts 文件夹内可以找到字形图标（Glyphicons），它包含了下列这些文件：glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphicons-halflings-regular.woff,示例代码：demo/bootstrap/day3/2/字形图标,布局组件 下拉菜单,下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。,示例代码：demo/bootstrap/da

18、y3/2/下拉菜单,布局组件 按钮组,按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时，这就显得非常有用。,示例代码：demo/bootstrap/day3/2/按钮组,布局组件 按钮下拉菜单,如需向按钮添加下拉菜单，只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可。您也可以使用 来指示按钮作为下拉菜单。,示例代码：demo/bootstrap/day3/2/按钮下拉菜单,布局组件 输入框组,Bootstrap 支持的另一个特性，输入框组。输入框组扩展自 表单控件。使用输入框组，您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮。 通过向输入域添加

19、前缀和后缀的内容，您可以向用户输入添加公共的元素。例如，您可以添加美元符号，或者在 Twitter 用户名前添加 ，或者应用程序接口所需要的其他公共的元素。,示例代码：demo/bootstrap/day3/2/输入框组,布局组件 导航元素,Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。,示例代码：demo/bootstrap/day3/2/导航元素,布局组件 导航栏,导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导

20、航栏是响应式元组件就，作为应用程序或网站的导航标题。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了为站点名称和基本的导航定义样式。,示例代码：demo/bootstrap/day3/2/导航栏,布局组件 面包屑,面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。,示例代码：demo/bootstrap/day3/2/面包屑,布局组件 分页,Bootstrap 支持的分页特性。分页（Pagination

21、），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。,示例代码：demo/bootstrap/day3/2/分页,布局组件 标签、徽章,标签可用于计数、提示或页面上其他的标记显示。徽章与标签相似，主要的区别在于徽章的边角更加圆滑。 徽章（Badges）主要用于突出显示新的或未读的项。,示例代码：demo/bootstrap/day3/2/标签徽章,布局组件 缩略图,大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。,示例代码：demo/bootstrap/day3/2/缩略图,布局组件 警告,警告（Alerts）向用户提

22、供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈。,示例代码：demo/bootstrap/day3/2/警告,布局组件 进度条,Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。,示例代码：demo/bootstrap/day3/2/进度条,布局组件 多媒体对象,这些抽象的对象样式用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。 媒体对

23、象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象：.media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。 .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。,示例代码：demo/bootstrap/day3/2/多媒体对象,布局组件 列表组,列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤：向元素 添加 class .list-group。 向 添加 class .li

24、st-group-item。,示例代码：demo/bootstrap/day3/2/列表组,布局组件 面板,面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 元素添加 class .panel 和 class .panel-default 即可。,示例代码：demo/bootstrap/day3/2/面板,3. 实例实践操作（作业）/ TODO,Bootstrap的拥有丰富的布局组件，这里不可能逐个讲解。希望大家课后尽可能多的去实践这些布局组件。只有动手操作才能对组件的使用有深刻的了解。,前端开发工程师 Bootstrap Day4,1. Bootstrap插件概览,

25、在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况被触发。,Bootstrap插件引用,站点引用 Bootstrap 插件的方式有两种：单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件，请先

26、确保弄请这些插件之间的依赖关系。 编译（同时）引用：使用 bootstrap.js 或压缩版的 bootstrap.min.js。不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。,所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。,2. Bootstrap插件详解,接下来我们将详细讲解如下Bootstrap插件：过渡效果 模态窗口 下拉菜单 滚动监听 标签页 工具提示 弹出框 警告框,Bootstrap插件 过渡效果,如果您想要单独引用该插件的功能，那么除了其他的 JS 文件，您还需要引用 trans

27、ition.js。或者，正如前面一节中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果。,示例代码：demo/bootstrap/day4/2/过渡效果,Bootstrap插件 模态窗口,模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。如果您想要单独引用该插件的功能，那么您需要引用mo

28、dal.js。或者，正如前一节中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。,模态窗口 用法,您可以切换模态框（Modal）插件的显示或隐藏内容：通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle=“modal“，同时设置 data-target=“#identifier“ 或 href=“#identifier“ 来指定要切换的特定的模态框（带有 id=“identifier“）。xxx 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=“identif

29、ier” 的模态框。$(#identifier).modal(options),示例代码：demo/bootstrap/day4/2/模态窗口,模态窗口 方法,通过Javascript可以使用如下的方法对窗口进行操作：,示例代码：demo/bootstrap/day4/2/模态窗口,模态窗口 事件,下面列出了模态框中要用到事件。这些事件可在函数中当钩子使用：,示例代码：demo/bootstrap/day4/2/模态窗口,Bootstrap插件 下拉菜单,前面一天讲解了下拉菜单，但是没有涉及到交互部分，本节将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导

30、航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。如果您想要单独引用该插件的功能，那么您需要引用dropdown.js。或者，正如前一节中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。,下拉菜单 - 用法,您可以切换下拉菜单（Dropdown）插件的隐藏内容：通过 data 属性：向链接或按钮添加 data-toggle=“dropdown” 来切换下拉菜单：下拉菜单（Dropdown）触发器 . 通过 JavaScript：通过 JavaScript 调用下拉菜单切换： $(.dropdown-toggle).dropdown(),示例代码：d

31、emo/bootstrap/day4/2/下拉菜单,Bootstrap插件 滚动监听,滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。如果您想要单独引用该插件的功能，那么您需要引用scrollspy.js。或者，正如前一节中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。,滚动监听 用法,可以向顶部导航添加滚动监听行为：通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy=“scroll

32、“。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。. ,示例代码：demo/bootstrap/day4/2/滚动监听,滚动监听 用法,通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数。 $(body).scrollspy( target: .navbar-example ),示例代码：demo/bootstrap/day4/2/滚动监听,滚动监听 方法,.scrollspy(refresh)：当通过 JavaScript 调用 scroll

33、spy 方法时，您需要调用 .refresh 方法来更新 DOM。这在 DOM 的任意元素发生变更（即添加或移除了某些元素）时非常有用。 $(data-spy=“scroll“).each(function () var $spy = $(this).scrollspy(refresh),示例代码：demo/bootstrap/day4/2/滚动监听,滚动监听 事件,示例代码：demo/bootstrap/day4/2/滚动监听,下面列出了滚动监听中要用到事件。这些事件可在函数中当钩子使用：,Bootstrap插件 标签页,通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个

34、插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。如果您想要单独引用该插件的功能，那么您需要引用tab.js。或者，正如前一节中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。,标签页 用法,可以通过以下两种方式启用标签页：通过 data 属性：您需要添加 data-toggle=“tab“ 或 data-toggle=“pill“ 到锚文本链接中。Home ,示例代码：demo/bootstrap/day4/2/标签页,标签页 用法,通过 Javascript：您可以使用 Javscript 来启用标签页，如下所示： $(#my

35、Tab a).click(function (e) e.preventDefault() $(this).tab(show) ),示例代码：demo/bootstrap/day4/2/标签页,标签页 方法,.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。Home. $(function () $(#myTab a:last).tab(show) ) ,示例代码：demo/bootstrap/day4/2/便签页,标签页 事件,示例代码：demo/bootstrap/day4/2/标签页,下面列出了标签

36、页（Tab）中要用到事件。这些事件可在函数中当钩子使用：,Bootstrap插件 工具提示,当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy的启发。工具提示（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。如果您想要单独引用该插件的功能，那么您需要引用tooltip.js。或者，正如前一节中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。,工具提示 用法,可以通过以下两种

37、方式启用工具提示：通过 data 属性：如需添加一个工具提示（tooltip），只需向一个锚标签添加 data-toggle=“tooltip“ 即可。默认情况下，插件把工具提示（tooltip）设置在顶部。 请悬停在我的上面 通过 JavaScript：通过 JavaScript 触发工具提示（tooltip）。 $(#identifier).tooltip(options),示例代码：demo/bootstrap/day4/2/工具提示,工具提示 用法,工具提示（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激

38、活它（读取 javascript）。使用下面的脚本来启用页面中的所有的工具提示（tooltip）： $(function () $(“data-toggle=tooltip“).tooltip(); );,示例代码：demo/bootstrap/day4/2/工具提示,工具提示 方法,下面是一些工具提示（Tooltip）插件中有用的方法：,示例代码：demo/bootstrap/day4/2/工具提示,工具提示 事件,示例代码：demo/bootstrap/day4/2/工具提示,下面列出了工具提示（Tooltip）中要用到事件。这些事件可在函数中当钩子使用：,Bootstrap插件 弹出框,

39、弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。如果您想要单独引用该插件的功能，那么您需要引用popover.js。或者，正如前一节中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。,弹出框 用法,可以通过以下两种方式启用弹出框：通过 data 属性：如需添加一个弹出框（popover），只需向一个锚标签添加data-toggle

40、=“popover“ 即可。默认情况下，插件把弹出框（popover）设置在顶部。 请悬停在我的上面 通过 JavaScript：通过 JavaScript 触发弹出框（popover） 。 $(#identifier). popover(options),示例代码：demo/bootstrap/day4/2/弹出框,弹出框 用法,弹出框（popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）： $(function () $(

41、“data-toggle=popover“).popover(); );,示例代码：demo/bootstrap/day4/2/弹出框,弹出框 方法,下面是一些弹出框（Popover）插件中有用的方法：,示例代码：demo/bootstrap/day4/2/弹出框,弹出框 事件,示例代码：demo/bootstrap/day4/2/弹出框,下面列出了弹出框（Popover）中要用到事件。这些事件可在函数中当钩子使用：,Bootstrap插件 警告框,警告框（Alert）消息大多是用来想终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dis

42、miss）功能。如果您想要单独引用该插件的功能，那么您需要引用popover.js。或者，正如前一节中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。,警告框 用法,可以通过以下两种方式启用警告框：通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss=“alert“，就会自动为警告框添加关闭功能。 通过 JavaScript：通过 JavaScript 添加可取消功能。 $(“.alert“).alert(),示例代码：demo/bootstrap/day4/2/警告框,警告框 方法

43、,下面是一些警告框（Alert）插件中有用的方法：,示例代码：demo/bootstrap/day4/2/警告框,警告框 事件,示例代码：demo/bootstrap/day4/2/警告框,下面列出了警告框（Alert）中要用到事件。这些事件可在函数中当钩子使用：,Bootstrap插件 按钮,通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。如果您想要单独引用该插件的功能，那么您需要引用button.js。或者，正如前一节中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。,按钮 用法,可以通

44、过以下两种方式启用按钮：通过 data 属性：并通过向 btn-group 添加 data 属性 data-toggle=“buttons“ 。 通过 JavaScript：通过 JavaScript启用按钮（Button）插件。 $(.btn).button(),示例代码：demo/bootstrap/day4/2/按钮,Bootstrap插件 折叠,折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。如果您想要单独引用该插件的功能，那么您需要引用collapse.js。或者，正如前一节中所提到，您可以引用 bootstra

45、p.js 或压缩版的 bootstrap.min.js。,折叠 用法,可以通过以下两种方式启用警告框：通过 data 属性：向元素添加 data-toggle=“collapse“和data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。 通过 JavaScript：可通过 JavaScript 激活 collapse 方法。 $(.collapse).collapse(),示例代码：demo/boots

46、trap/day4/2/折叠,折叠 方法,下面是一些折叠（Collapse）插件中有用的方法：,示例代码：demo/bootstrap/day4/2/折叠,折叠 事件,示例代码：demo/bootstrap/day4/2/折叠,下面列出了折叠（Collapse）中要用到事件。这些事件可在函数中当钩子使用：,Bootstrap插件 轮播,Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。如果您想要单独引用该插件的功能，那么您需要引用carousel.js。或者，正如

47、前一节中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。,轮播 用法,可以通过以下两种方式启用警告框：通过 data 属性： 属性 data-slide接受关键字prev或next，用来改变幻灯片相对于当前位置的位置。 使用 data-slide-to来向轮播床底一个原始滑动索引，data-slide-to=“2“ 将把滑块移动到一个特定的索引，索引从 0 开始计数。 data-ride=“carousel“属性用于标记轮播在页面加载时就开始动画播放。 通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调。 $(.

48、carousel).carousel(),示例代码：demo/bootstrap/day4/2/轮播,轮播 方法,下面是一些轮播（Carousel）插件中有用的方法：,示例代码：demo/bootstrap/day4/2/轮播,轮播 事件,示例代码：demo/bootstrap/day4/2/轮播,下面列出了轮播（Carousel）中要用到事件。这些事件可在函数中当钩子使用：,3. 实例实践操作（作业）/ TODO,Bootstrap的拥有丰富的布局组件，这里不可能逐个讲解。希望大家课后尽可能多的去实践这些布局组件。只有动手操作才能对组件的使用有深刻的了解。,前端开发工程师 Bootstrap Day5,1. Bootstrap优质项目推荐,LayoutIt,LayoutIt拥有拖拽接口的功能，能简单迅速的构建一个Bootstrap前端代码，并兼容任何的编程语言，允许用户下载HTML。,访问地址：http:/