Bootstrap组件

Bootstrap徽章

给链接、导航等元素嵌套 元素，可以很醒目的展示新的或未读的信息条目。
Inbox 42

Messages 4

image.png

Bootstrap缩略图

缩略图在网站中最常用的地方就是产品列表页面，一行显示几张图片，有的在图片底下（左侧或右侧）带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。
还可以让缩略图配合标题、描述内容，按钮等,在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮等.

Thumbnail label

...

Button
Button

Bootstrap警告框

在网站中，网页总是需要和用户一起做沟通与交流。特别是当用户操作上下文为用户提供一些有效的警示框，比如说告诉用户操作成功、操作错误、提示或者警告等.
Bootstrap 提供的样式。
Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果：
1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；
2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；
3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；
4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。
具体使用的时候，可以在类名为“alert”的div容器里放置提示信息。实现不同类型警示框，只需要在“alert”基础上追加对应的类名。

×恭喜您操作成功！

请输入正确的密码

您已操作失败两次，还有最后一次机会

对不起，您输入的密码有误

image.png

Bootstrap进度条

通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。
提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。使用方法非常的简单.

60%

image.png

Bootstrap模态框

Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：
弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮
弹出框主体，一般使用“modal-body”表示，弹出框的主要内容
弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

image.png

Bootstrap滚动监听

滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。

通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
...

...

...
通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：$('body').scrollspy({ target: '.navbar-example' })

代码如下所示：

• 
  Section 1
  


• 
  Section 2
  


• 
  Section 3
  


• 
  Section 4
  
  
  Link 1
  Link 2
  
  
  

Section 1

Try to scroll this section and look at the navigation list while scrolling!

Section 2

Try to scroll this section and look at the navigation list while scrolling!

Section 3

Try to scroll this section and look at the navigation list while scrolling!

Section 4-1

Try to scroll this section and look at the navigation list while scrolling!

Section 4-2

Try to scroll this section and look at the navigation list while scrolling!

效果如下所示：

image.png

Bootstrap标签效果

通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。
通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。
通过 JavaScript：('#myTab a').click(function (e) { e.preventDefault()(this).tab('show') })

image.png

Bootstrap提示效果

当您想要描述一个链接的时候，工具提示（Tooltip）就显得非常有用。工具提示（Tooltip）插件根据需求生成内容和标记，默认情况下是把工具提示（tooltip）放在它们的触发元素后面。
通过 data 属性：如需添加一个工具提示（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为工具提示（tooltip）的文本。默认情况下，插件把工具提示（tooltip）设置在顶部。
请悬停在我的上面
通过 JavaScript：$('#identifier').tooltip(options)

具体代码如下：
鼠标移动到我这

具体的各个方向设置提示工具代码如下 ：

提示框实例

鼠标移动到我这
鼠标移动到我这
鼠标移动到我这
鼠标移动到我这

image.png

image.png

Bootstrap泡芙效果

“泡芙”效果就是将一些次要的内容作为一个小的叠加层展添加到具体页面要素上，实现ipad风格的提示效果(实际上就是放大版的tooltip)。因此实现“泡芙”效果(popovers)首先需要引用tooltips插件。我们先来看看“泡芙”效果(popovers)的html的写法。

代码如下：
多次点我

效果如下：

image.png

指定弹出框的位置
默认情况下弹出框显示在元素右侧。

可以使用 data-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right:

代码如下：
点我
点我
点我
点我

(document).ready(function(){('[data-toggle="popover"]').popover();
});

image.png

关闭弹出框
默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框：

点我

提示:如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 "hover":

鼠标移动到我这