BootStrap应用开发学习入门1

全栈工程师修炼指南

发布于 2022-09-29 15:05:06

44.3K0

发布于 2022-09-29 15:05:06

文章被收录于专栏：全栈工程师修炼之路

[TOC]

0x00 BS 布局组件

1.字体图标(Glyphicons)

什么是字体图标？答:字体图标是在 Web 项目中使用的图标字体,可以通过基于项目的 Bootstrap 来免费使用这些图标。

在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件 (相关的 CSS 规则写在 dist 文件夹内的 css 文件夹内的 bootstrap.css 和 bootstrap-min.css 文件上 )：

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

字体图标列表:https://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm 在线定制字体:https://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

WeiyiGeek.

glyphicon 的 CSS 规则构成:

/**  font-face 规则实际上是在找到 glyphicons 地方声明 font-family 和位置 */
@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('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
 
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';  /** 调用 font-face 里面的元素的字体系列  **/
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;  /** 获得跨浏览器的一致性 */
  -moz-osx-font-smoothing: grayscale;
}

/** 是空的 glyphicon */
.glyphicon:empty {
  width: 1em;
}

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

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

我们可以直接采用 span 标签加上字体类即可，例如 <span class="glyphicon glyphicon-asterisk" style="color: rgb(50, 54, 170); text-shadow: rgb(0, 0, 0) 1px 1px 1px;"> Asterik</span>, 当然我们也可以进行自定义大小以及图标演示何阴影效果；

基础示例:

<div class="container">
    <p>使用字体图-并且利用button按钮进行设置图标大小</p>
    <div class="row">
      <div class="col-md-3">
          <input type="search" name="search" id="input" class="form-control" value="" required="required" title="" placeholder="请输入搜索信息">
      </div>
      <button class="btn">
          <span class="glyphicon glyphicon-search"></span>
      </button>
    </div>
    <br>
    <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>

    <hr>
    <p>定制字体图标</p>
    <p>定制字体尺寸/颜色/文本阴影</p>
    <button type="button" class="btn btn-primary btn-lg">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
    <button type="button" class="btn btn-primary btn-lg" style="color: rgb(248, 104, 21);">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
    <button class="btn btn-warning btn-lg" type="button">
        <span class="glyphicon glyphicon-user" style="color: rgb(255,255,255); text-shadow: rgb(0, 0, 0) 1px 1px px;"></span><span> User</span> 
    </button>

    <hr>
    <hr>
    <p>带有字体图标的导航栏</p>
    <nav class="navbar navbar-inverse" role="navigation">
      <!-- 标题头部-->
        <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"></span> Home</a></li>
              <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart"></span> Shop</a></li>
              <li><a href="#support"><span class="glyphicon glyphicon-headphones"></span> Support <span class="caret"></span></a></li>
            </ul>
          </div>
    </nav>
  </div>

WeiyiGeek.

注意事项:由于字体图标样式太多这里不一一进行显示，直接点击上面的网址生成即可；

2.导航栏

描述:一个网站基本都有一个导航栏，所以BS也为我们提供这个组件，并且还可以设置下拉菜单是可切换的，是以列表格式显示链接的上下文菜单；导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

下拉菜单

#Bootstrap .class 样式解释
.dropdown 指定下拉菜单都包裹在div标签或者ul标签下
.dropup 	指定向上弹出的下拉菜单
.dropdown-menu 	创建下拉菜单
.dropdown-menu-right 	下拉菜单右对齐
.dropdown-header 向下拉菜单的标签区域添加标题提示
.disabled 	下拉菜单中的禁用项
.divider 	  下拉菜单中的分割线

基础示例：

<div class="container">
    <hr>
    <p>下拉菜单</p>
    <!-- 
      .dropup 类用于指定一个向上的下拉菜单
      .dropdown-menu 类用于创建下拉菜单。
    -->
    <div class="dropdown">
      <button type="button" class="btn btn-primary dropdown-toggle" id="menu" data-toggle="dropdown">
        下拉菜单 
        <span class="caret"></span>
      </button>
      <!-- 并将其值为所有读取的元素的id , 当ul获取到焦点时，屏幕阅读器是会读：“下拉菜单” -->
      <ul class="dropdown-menu" role="menubar" aria-labelledby="menu">
        <li role="presentation" class="dropdown-header">分类1</li>
        <li role="presentation"><a href="#" role="menuitem">HTML</a></li>
        <li role="presentation"><a href="#" role="menuitem">CSS</a></li>
        <li role="presentation"><a href="#" role="menuitem">JavaScript</a></li>
        <li role="presentation"><a href="#" role="menuitem">jQuery</a></li>
        <li role="presentation"><a href="#" role="menuitem">Bootstrap</a></li>
        <li class="divider"></li>
        <li role="presentation" class="dropdown-header">分类2</li>
        <li role="presentation"><a href="#" role="menuitem">PHP</a></li>
        <li role="presentation" ><a href="#" role="menuitem">C</a></li>
        <li role="presentation" class="disabled"> <a href="#" role="menuitem">C++</a></li>
        <li role="presentation" class="disabled"> <a href="#" role="menuitem">Java</a></li>
      </ul>
    </div>
</div>

WeiyiGeek.

补充知识点:

#如果一个元素同时有aria-labelledby和aria-label，读屏软件会优先读出aria-labelledby的内容
aria-label #属性用来给当前元素加上的标签描述，接受字符串作为参数。是用不可视的方式给元素加label
aria-labelledby #如果被描述元素存在真实的描述元素，可使用它作为来绑定描述元素和被描述元素来代替

按钮下拉菜单 描述: 分割按钮的左边是原始的功能，右边是显示下拉菜单的切换，还可以进行按钮下拉的菜单变化

基础示例:

<p>按钮下拉分离</p>
<div class="btn-group">
  <button type="button" class="btn btn-primary btn-lg btn-toggle">下拉分离</button>
  <button type="button" class="btn btn-primary btn-lg btn-toggle active" data-toggle="dropdown"><span class="caret"></span></button>
  <span class="sr-only">切换下拉菜单</span>
  <ul class="dropdown-menu" role="menubar">
    <li class="dropdown-header">分类</li>
    <li> <a href="#" role="menuitem">功能</a></li>
    <li> <a href="#" role="menuitem">选择</a></li>
    <li> <a href="#" role="menuitem">选项</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">分类</li>
    <li> <a href="#" role="menuitem">案例</a></li>
    <li> <a href="#" role="menuitem">安全</a></li>
    <li class="disabled"> <a href="#" role="menuitem">禁用</a></li>
  </ul>
</div>

WeiyiGeek.

导航元素 描述:进行首页导航栏的菜单进行设置，导航菜单与下拉菜单使用相似的语法；默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class的无序列表。

#表格导航或ul标签
.nav  #的无序列表开始
.nav-tabs  #标签式的导航菜单选项卡
.nav-pills #胶囊式的导航菜单
.nav-stacked #垂直的胶囊式导航菜单
.nav-justified #两端对齐的导航 (在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用它，让标签式或胶囊式导航菜单与父元素等宽。)
.disabled    #则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态

.tab-content #与.tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改
.tab-pane  #动态标签面板
.fade      #逐渐消失
.in        #默认进入
.active    #激活状态

基础示例:

<p>导航菜单动态</p>
<!--- 导航元素样式 -->
<ul class="nav nav-pills nav-justified">
  <!-- 关键点:data-toggle="tab" a 标签里面-->
  <li class="active"><a data-toggle="tab" href="#home"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
  <li><a data-toggle="tab" href="#user"><span class="glyphicon glyphicon-user"></span> 用户中心</a></li>
  <li><a data-toggle="tab" href="#email"><span class="glyphicon glyphicon-envelope"></span> 用户邮箱</a></li>
  <!--- 导航下拉菜单 - 外层包裹dropdown -->
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-bookmark"></span> 书签 <span class="caret"></span></a>
    <ul class="dropdown-menu pull-right" role="menubar">
        <li class="dropdown-header">分类书签</li>
        <li class="active"><a href="#home" role="menuitem" tabindex="-1">首页</a></li>
        <li><a href="#user" data-toggle="tab" role="menuitem" tabindex="-1" >用户中心</a></li>
        <li class="disabled"><a href="#email" role="menuitem" tabindex="-1">邮箱</a></li>
      </ul>
  </li>
</ul>
<!-- 
切换导航菜单书签
提示: 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。
-->
<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>首页</h3>
    <p>学的不仅是技术，更是梦想！！！</p>
  </div>
  <div id="user" class="tab-pane fade">
    <h3>用户中心</h3>
    <p>这用户中心显示的内容。</p>
  </div>
  <div id="email" class="tab-pane fade">
    <h3>用户邮箱</h3>
    <p>这是用户邮箱显示的内容。</p>
  </div>
</div>

WeiyiGeek.

导航栏 描述:navigation 是一个很好的功能，是 Bootstrap 网站的一个突出特点。

#默认的导航栏 (常用浮动容器)
.navbar  #<nav> 标签元素添加 role="navigation"，有助于增加可访问性
.navbar-default  #默认导航栏样式
.navbar-inverse  #黑色导航栏样式,创建一个带有黑色背景白色文本的反色的导航栏
.navbar-fixed-top   #导航栏固定在页面的顶部
.navbar-fixed-bottom 
.navbar-static-top   #随着页面一起滚动的静态导航栏

.navbar-header  #div标签 
.navbar-brand   #a标签使用文本看起来更大一号
# 第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么
# 第二个是 data-target，指示要切换到哪一个元素
# 第三个是带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮

.collapse  #div 标签 (导航链接)
.navbar-collapse  #响应式的导航栏必须使用Bootstrap 折叠（Collapse）插件，并且折叠的内容必须包裹在其中

.nav  # ul 标签 无序列表向导航栏添加链接
.navbar-nav  #ul 标签 导航栏 

.navbar-text   #导航栏中的文本
.navbar-form   #导航栏中的表单
.navbar-right  #导航栏组件对齐方式 (left / center / right ) 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件
.navbar-btn    #导航栏中的按钮向不在 <form> 中的 <button> 元素添加按钮，按钮在导航栏上垂直居中

基础示例:

<!--
BootStrap导航栏下拉 role 属性 role="navigation" : 有助于增加可访问性
-->
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
  <!-- 导肮和toggle得到更好的移动显示分组,响应式导航栏 -->
  <div class="contaniner-fluid">
    <div class="navbar-header">
      <!-- 
        采用了collapse 插件
        data-target 对于 class 名称(.) 和 Id 名称(#)
      -->
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">切换导航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">极客Geek</a>
      <p class="navbar-text">导航栏文本</p>
    </div>
  </div>
  <!-- 收集用于切换的导航链接、表单和其他内容 -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav"> <!-- 导航条 --->
      <li class="active"><a href="#">导航1</a></li>
      <li><a href="#">导航2</a></li>
      <li class="dropdown">
          <!--- 
            关键点: class="dropdown-toggle" data-toggle="dropdown" 取消后不可以显示下拉菜单
            结合图标的导航链接 glyphicon glyphicon-headphones
            -->
        <a href="#support" class="dropdown-toggle" data-toggle="dropdown" role="button"><span class="glyphicon glyphicon-headphones">
          </span> 导航三 <span class="caret"></span>
        </a>
          <ul class="dropdown-menu pull-left" role="menu">
              <li class="text-left"><a href="#" tabindex="-1">网络安全设备</a></li>
              <li class="text-center"><a href="#">网络通信设备</a></li>
              <li class="text-right"><a href="#">物联网设备</a></li>
              <!--- 横线显示分割  -->
              <li class="divider"></li>
              <li class="dropdown-header">云计算</li>
              <li><a href="#">云计算可信设备</a></li>
              <li class="divider"></li>
              <li class="dropdown-header">虚拟化</li>
              <!--- 禁用此项 -->
              <li class="disable"><a href="#">虚拟化数据存储设备</a></li>
            </ul>
      </li>
    </ul>
    <!-- 导航栏下拉菜单（右） -->
    <ul class="nav navbar-nav navbar-right"> <!-- 导航条 -->
        <li><a href="#">导航4</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#">导航链接</a></li>
            <li><a href="#">导航链接</a></li>
          </ul>
        </li>
      </ul>
    <!--- 导航栏中搜索表单-->
    <form class="navbar-form navbar-left" role="search" action="search.php" method="POST"> <!-- 导航表单 -->
      <div class="form-group">
        <input type="search" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
    <!-- 导航栏中的按钮向不在 form 标签里面的button添加class navbar-btn -->
    <button type="button" class="btn btn-warning navbar-btn navbar-left">navbar-btn</button>
  </div>
</nav>

WeiyiGeek.

注意事项:

.navbar-btn 可被使用在<a> 和 <input>元素上, 不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn，因为它不是标准的 button class。

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

.breadcrumb  /* class 的无序列表 */

/* 分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加：*/
.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;
}

WeiyiGeek.

基础示例:

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">2013</a></li>
  <li class="active">十一月</li>
</ul>

WeiyiGeek.

徽章（Badges） 描述:徽章与标签相似，主要的区别在于徽章的边角更加圆滑,主要用于突出显示新的或未读的项, 添加 <span class="badge"> 到链接、Bootstrap 导航等这些元素上即可。

注意事项:当没有新的或未读的项时，通过 CSS 的 :empty 选择器，徽章会折叠起来，表示里边没有内容。

基础示例:

<!-- .badge 类指定未读消息的数量 -->
<p>Bootstrap 徽章（Badges）</p>
<span>示例1:</span><a href="#">收件箱 <span class="badge">50</span></a>
<br>
<p>示例2:</p>
<ul class="nav nav-pills nav-stacked" style="max-width: 160px;">
  <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页 <span class="badge">180</span></a></li>
  <li class="active"><a href="#"><span class="glyphicon glyphicon-user"></span> 用户中心</a></li>
  <li class="active"><a href="#"><span class="glyphicon glyphicon-envelope"></span> 邮箱信息 <span class="badge">20</span></a></li>
</ul>

WeiyiGeek.

列表组（list-group） 描述:列表组件用于以列表形式呈现复杂的和自定义的内容,我们还可以向任意的列表项添加徽章组件，它会自动定位到右边;

Class类说明:

.list-group       #列表组  ul / div
.list-group-item  #列表组项 li / a 
.list-group-item-heading #列表组项头
.list-group-item-text  #列表组项文本
.list-group-horizontal
.active

基础示例:

<style>
.list-group-horizontal .list-group-item {
    display: inline-block;
}
.list-group-horizontal .list-group-item {
    margin-bottom: 0;
    margin-left:-4px;
    margin-right: 0;
}
.list-group-horizontal .list-group-item:first-child {
    border-top-right-radius:0;
    border-bottom-left-radius:4px;
}
.list-group-horizontal .list-group-item:last-child {
    border-top-right-radius:4px;
    border-bottom-left-radius:0;
}
</style>
<ul class="list-group">
    <li class="list-group-item">li标签列表组项示例1</li>
    <li class="list-group-item">li标签列表组项示例1</li>
    <li class="list-group-item">我的信息<span class="badge">新</span></li>
    <li class="list-group-item">我的邮箱<span class="badge">123</span></li>
    <a href="#" class="list-group-item active">a标签实现列表组项</a>
</ul>
<br>
<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">
            入门网站包
        </h4>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">
            免费域名注册
        </h4>
        <p class="list-group-item-text">
            您将通过网页进行免费域名注册。
        </p>
    </a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">
            24*7 支持
        </h4>
        <p class="list-group-item-text">
            我们提供 24*7 支持。
        </p>
    </a>
</div>
<br>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 text-center">
    <div class="list-group list-group-horizontal">
        <a href="#" class="list-group-item">Google</a>
        <a href="#" class="list-group-item active">Runoob</a>
        <a href="#" class="list-group-item">Taobao</a>
        <a href="#" class="list-group-item">Github</a>
    </div>
</div>

WeiyiGeek.

3.分页

描述:分页(Pagination) 是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。

分页的Class

#分页 pagination
.pagination	#添加该 class 来在页面上显示分页 ul标签
.pagination-lg  #获取不同大小的项
.pagination-sm

#翻页Pager
.pager	   #添加该 class 来获得翻页链接
.previous  #把链接向左对齐
.next      #把链接向右对齐

#活动或者禁用
.disabled  #定义不可点击的链接 li 标签
.active    #指示当前的页面

基础示例:

<div class="container">
    <div class="page-header">
        <h1>文档标题<small> 子内容显示</small></h1>
      </div>

  <p>分页</p>
  <ul class="pagination pagination-lg">
      <li><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 class="disabled"><a href="#">5</a></li>
      <li><a href="#">6</a></li>
      <li><a href="#">7</a></li>
      <li><a href="#">8</a></li>
      <li><a href="#">9</a></li>
      <li><a href="#">&raquo;</a></li>
  </ul>
  <br>
  <p>翻页</p>
  <ul class="pager pager-lg">
    <li class="previous"><a href="">&larr; Previous</a></li>
    <li class="next"><a href="">Next &rarr;</a></li>
  </ul>
</div>

WeiyiGeek.

4.标签(Label)

描述:标签可用于计数、提示或页面上其他的标记显示

.label #显示标签;
.label label-default 	#默认的灰色标签 	尝试一下
.label label-primary 	#"primary" 类型的蓝色标签 	尝试一下
.label label-success #	"success" 类型的绿色标签 	尝试一下
.label label-info 	#"info" 类型的浅蓝色标签 	尝试一下
.label label-warning 	#"warning" 类型的黄色标签 	尝试一下
.label label-danger 	#"danger" 类型的红色标签

基础示例:

<p>Boostrap 标签案例</p>
<h3>常规标签: <span class="label label-default">BS标签</span></h3>
<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

WeiyiGeek.

5.提示与进度条

描述:警告（Alerts）向用户提供了一种定义消息样式的方式,它们为典型的用户操作提供了上下文信息反馈。为了创建一个内联的可取消的警告框，请使用警告（Alerts） jQuery 插件。

BS的类说明:

.alert  #基础弹框
.alert-success、.alert-info、.alert-warning、.alert-danger  #基本的警告框
.alert-dismissable  #div标签 可取消的警告（Dismissal Alerts）需要内联 <button class="close" data-dismiss="alert"/>
.alert-link         #a标签 使用 .alert-link 实体类来快速提供带有匹配颜色的链接。

#插件（其实感觉多余了）
.alert()	#该方法让所有的警告框都带有关闭功能。$('#identifier').alert();
.alert('close')	#关闭所有的警告框。	$('#identifier').alert('close');

#关闭触发事件
close.bs.alert	#当调用 close 实例方法时立即触发该事件。	
$('#myalert').bind('close.bs.alert', function () {
  // 执行一些动作...
})
closed.bs.alert	#当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。	
$('#myalert').bind('closed.bs.alert', function () {
    // 执行一些动作...
})

基础示例:

<div class="container">
  <div class="page-header">
    <h1>Bootstrap 实例 - <small>警告（Alerts）</small></h1>
  </div>
  <p class="help-block">可取消的警告（Dismissal Alerts）</p>
  <p>方式1：创建一个内联的可取消的警告框</p>
  <div class="alert alert-success">成功！很好地完成了提交。<a href="#" name="closealert"><span style="padding-top: 2px;" class="glyphicon glyphicon-remove pull-right"></span></a></div>
  <div class="alert alert-info">信息！请注意这个信息。<a href="#" name="closealert"><span style="padding-top: 2px;" class="glyphicon glyphicon-remove pull-right"></span></a></div>
  <p>方式2：</p>
  <div class="alert alert-success alert-dismissable">
      <!-- 关键点:class="close" data-dismiss="alert"  -->
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>
      成功！很好地完成了提交。
  </div>
  <div class="alert alert-info alert-dismissable">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times;</button>
      信息！请注意这个信息。
  </div>
  <div class="alert alert-danger alert-dismissable">
    <!-- 使用 .alert-link 实体类来快速提供带有匹配颜色的链接。 -->
    <a href="#" class="alert-link">错误！请进行一些更改</a>
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times;</button>
  </div>
  <p>方式3:</p>
  <div id="myAlert" class="alert alert-warning">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    <strong>警告！</strong>您的网络连接有问题。
  </div>
  <p>方式4:插件触发事件</p>
  <div id="myAlert1" class="alert alert-info">
    <a href="#" class="close" data-dismiss="alert">&times;</a>
    信息！请注意这个信息。
  </div>
</div>

<!-- 需要放在jQuery js后方式1隐藏错误 -->
<script>
    $(function(){
      $("a[name='closealert']").click(function(){
        $(this).parent().slideUp(200);
      });

       $(".close").click(function(){
        $("#myAlert").alert();
        $("#myAlert").alert('close'); //关闭所有
      });

      $("#myAlert1").bind('closed.bs.alert', function(){
        alert('特性完成已经关闭')
      });
    });


</script>

WeiyiGeek.

进度条(progress): 创建加载、重定向或动作状态的进度条。 Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性，Opera 12 不支持动画。

Class类:

.progress     # 基本的进度条单体
.progress-striped  #条纹的进度条
.active #动画的进度条，添加一个带有 class .progress 和 .progress-striped 的 <div>
.progress-bar # 默认进度面板
.progress-bar-*  #带有颜色的面板其中 * 可以是 success、info、warning、danger。
#style 属性可以添加一个带有百分比表示的宽度的 ，例如 style="60%"; 表示进度条在 60% 的位置。

基础示例:

<p>各类进度条</p>
<div class="progress progress-striped">
  <!-- aria-valuenow表示当前进度条的进度（60就是60%的意思） -->
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">90% 完成（成功）</span>
  </div>
</div>

<div class="progress progress-striped active">
    <!-- aria-valuenow表示当前进度条的进度（60就是60%的意思） -->
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
      <span class="sr-only">90% 完成（成功）</span>
    </div>
</div>

<p>堆叠的进度条</p>
<div class="progress progress-striped active">
  <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>

<p>增长的进度条示例</p>
<div class="progress progress-striped active">
  <span id="progress" class="pull-right pull-fluid">0%</span>
  <div id="progress-bar"class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
  style="width: 0%;">
  </div>
</div>
<button type="button" class="btn btn-primary" id="start">开始</button>

WeiyiGeek.

6.多媒体对象(Media Object)

描述:多媒体对象（Media Object）可以用更少的代码来实现媒体对象与文字的混排。

如：图像、视频、音频等。多媒体对象的样式可用于创建各种类型的组件（比如：博客评论），我们可以在组件中使用图文混排，图像可以左对齐或者右对齐。

Class类说明:

.media         #基础多媒体对象
.media-object  #媒体对象
.media-body    #文本内容
.media-heading #设置标题

.media-left    #让多媒体对象(图片)来实现左对齐
.media-right   #实现了右对齐
.media-top      #置顶对齐
.media-middle  #居中对齐
.media-bottom  #置底对齐

基础示例:

<div class="container">
<p>媒体组示例:</p>
    <div class="media">
    <div class="media-left">
        <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:45px">
    </div>
    <div class="media-body">
        <h4 class="media-heading">左对齐<small>Love</small></h4>
        <p>这是一个示例文本，这是一个示例文本，这是一个示例文本</p>

        <!-- 内嵌多媒体对象 -->
        <div class="media">
            <div class="media-left">
            <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:45px">
            </div>
            <div class="media-body">
            <h4 class="media-heading">内嵌对象<small><i>Posted on February 21, 2016</i></small></h4>
            <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
            </div>
        </div>
    </div>
    </div>

    <!--- 注意右对齐是媒体对象是再media-body后-->
    <div class="media">
    <div class="media-body">
        <h4 class="media-heading">右对齐<small>Love</small></h4>
        <p>这是一个示例文本，这是一个示例文本，这是一个示例文本</p>
    </div>
    <div class="media-right">
        <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
    </div>
    </div>

    <!-- 置底 -->
<div class="media">
    <div class="media-body">
        <h4 class="media-heading">置底</h4>
        <p>这是一些示例文本...这是一些示例文本..这是一些示例文本..</p>
    </div>
    <div class="media-bottom">
        <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
    </div>
</div>

<div class="media">
    <div class="media-left media-middle">
        <img src="https://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
    </div>
    <div class="media-body">
        <h4 class="media-heading">
            居中对齐 <small> Test</small>
        </h4>
        <p>这是一些示例文本...这是一些示例文本..这是一些示例文本..这是一些示例文本...这是一些示例文本..这是一些示例文本..这是一些示例文本...这是一些示例文本..这是一些示例文本..</p>
    </div>
</div>
</div>

WeiyiGeek.

7.面板(Panels)

描述:面板组件用于把 DOM 组件插入到一个盒子中

Class类说明:

.panel          #面板
.panel-default  #默认面板样式
.panel-heading  #很简单地向面板添加标题容器
.panel-title    #<h1>-<h6> 来添加预定义样式的标题
.panel-body     #面板内容
.panel-footer   #面板脚注
.table          #在面板中创建一个无边框的表格
#带语境色彩的面板
panel-primary、panel-success、panel-info、panel-warning、panel-danger


#Bootstrap Well是一种会引起内容凹陷显示或插图效果的容器 <div>
.well 
.well-* #尺寸大小 xs sm md lg

注意事项:

面版脚注不会从带语境色彩的面板中继承颜色和边框，因为它不是前景中的内容。

基础示例:

<div class="container">
    <p>#面板 Panels 基本样式演示:</p>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">带有Title的面板标题</h3>
        </div>
        <div class="panel-body">
            基本面板内容
        </div>
        <div class="panel-footer">面板脚注</div>
    </div>
    <br>
    <p>#带语境色彩的面板与表格面板</p>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">面板标题-panel-primary</h3>
        </div>
        <div class="panel-body">
            设置带语境色彩的面板
        </div>
        <table class="table table-hover table-striped table-bordered">
            <th>产品</th><th>价格</th>
            <tr><td>iPhone 11</td><td>11972</td></tr>
            <tr><td>红米note pro 8 </td><td>1299</td></tr>
        </table>
    </div>
    <br>
    <p>#带列表组的面板</p>
    <div class="panel panel-danger">
        <div class="panel-heading">
            <h3 class="panel-title">列表组面板</h3>
        </div>
        <div class="panel-body">
            测试的列表组面板文本主体;
        </div>
        <div class="list-group">
            <a href="#" class="list-group-item active"><span class="badge"><span class="glyphicon glyphicon-remove"></span></span> 面板列表项1</a>
            <a href="#" class="list-group-item">面板列表项2</a>
        </div>
    </div>
    <p> Well </p>
    <div class="well well-lg">您好，我在大的 Well 中！</div>
    <div class="well well-sm">您好，我在小的 Well 中！</div>
</div>

WeiyiGeek.

0x01 BS 插件

描述:Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动;利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况下被触发。

站点引用 Bootstrap 插件的方式有两种：

单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件，请先确保弄清这些插件之间的依赖关系。
编译（同时）引用：使用 bootstrap.js 或压缩版的 bootstrap.min.js。

Bootstrap 为大多数插件的独特行为提供了自定义事件。事件有两种形式：

动词不定式：这会在事件开始时被触发。例如 ex: show。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

$('#myModal').on('show.bs.modal', function (e) {
// 阻止模态框的显示
  if (!data) return e.preventDefault() 
})

过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。

注意事项:

所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。
不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。
查看 Bootstrap 当前支持的 jQuery 版本

通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码（首选方式），如果需要关闭请采用下列方式：

$(document).off('.data-api') 	   #关闭 data 属性 API 
$(document).off('.alert.data-api') #关闭一个特定的插件

编程方式的 API 是所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）

$(".btn.danger").button("toggle").addClass("fat")

// 所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数
$("#myModal").modal()     // 初始化为默认行为
$("#myModal").modal({ keyboard: false })   // 初始化为不支持键盘               
$("#myModal").modal('show')       // 初始化并立即调用 show

每个插件在 Constructor 属性上也暴露了其原始的构造函数：$.fn.popover.Constructor。

$('[rel=popover]').data('popover'). #想获取某个特定插件的实例

避免命名空间冲突

在开发中可能会与其他UI框架一起使用可能会发生命名空间冲突，这时候您可以通过调用插件的 .noConflict 方法恢复其原始值。

1.过渡效果（Transition）

如果您想要单独引用该插件的功能，那么除了其他的 JS 文件，您还需要引用 transition.js它是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类;它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果;

常见效果:

具有幻灯片或淡入效果的模态对话框
具有淡出效果的标签页
具有淡出效果的警告框
具有幻灯片效果的轮播板

2.模态框（Modal）

模态框（Modal）是覆盖在父窗体上的子窗体。通常目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

使用方法:

通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal" 同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框： $('#identifier').modal(options)

#关键点
data-toggle="modal" data-target="#myModal"  #触发元素，自定义的 data 属性 data-toggle 用于打开模态窗口。
id="myModal" aria-labelledby="myModalLabel" aria-hidden="true" #弹出层绑定，性引用模态框的标题。
class="close" data-dismiss="modal" aria-hidden="true"     #关闭按元素

Class类说明:

modal          #把 <div> 的内容识别为模态框。
modal-dialog  #模态框弹出层
modal-content #内容
modal-header  #头部
modal-title   #标题
modal-body	  #主题部分
modal-footer  #底部

选项可以用来定制模态窗口（Modal Window）的外观和感观，它们是通过 data 属性或 JavaScript 来传递的。

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，则会加载其中的内容。如下面的实例所示：
<a data-toggle="modal" href="remote.html" data-target="#modal" rel="noopener noreferrer">请点击我</a>

modal() 一起使用的有用的方法。

Options: .modal(options)	把内容作为模态框激活。接受一个可选的选项对象。	$('#identifier').modal({ keyboard: false })
Toggle: .modal(‘toggle’)	手动切换模态框。	$('#identifier').modal('toggle')
Show: .modal(‘show’)	手动打开模态框。	$('#identifier').modal('show')
Hide: .modal(‘hide’)	手动隐藏模态框。	$('#identifier').modal('hide')

模态框中要用到事件

show.bs.modal	在调用 show 方法后触发。	$('#identifier').on('show.bs.modal', function () { // 执行一些动作... })
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... })
hide.bs.modal	当调用 hide 实例方法时触发。	$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... })
hidden.bs.modal	当模态框完全对用户隐藏时触发。	$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... })

基础示例:

<div class="container">
<div class="page-header">
  <h1>模态框（Modal）插件<small>案例</small></h1>
</div>
<button type="button" class="btn btn-large btn-block btn-primary" data-toggle="modal" data-target="#myModal">Modal Demo</button> <!-- 关键点-->
<div class="modal fade" id="myModal" tabindex="-1" role="rialog" aria-labelledby="myModalLabel" aria-hidden="true"><!-- 关键点 fade 引入影藏-->
  <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"><!-- 关键点-->
        这里是基础实例标题;
        <input type="text" name="Demo" id="Demo" class="form-control" placeholder="测试输入">
      </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>
  </div>
</div>

<p>案例2</p>
<a data-toggle="modal" href="http://baidu.com" data-target="#modal" rel="noopener noreferrer" class="btn btn-danger">请点击我 Modal Demo</a>
<div class="modal fade" id="modal" tabindex="-1"> <!-- 如果没有tabindex就按下ese就不能隐藏模态框 -->
  <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">百度一下</h4>
      </div>
      <div class="modal-body"><!-- 关键点-->
        <iframe src="http://baidu.com" style="width: 100%;height: 100%;"></iframe>
      </div>
      <div class="modal-footer"><!-- 关键点-->
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <!-- 关键点-->
      </div>
    </div>
  </div>
</div>
</div>

<!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->
<script>
  $(function(){
    $('#modal').on('show.bs.modal',function(){
      console.log(new Date().toLocaleString() +" - 在调用 show 方法后触发。");
    });
    $('#modal').on('shown.bs.modal',function(){
      console.log(new Date().toLocaleString() +" - 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。");
    });
    $('#modal').on('hide.bs.modal',function(){
      console.log(new Date().toLocaleString() +" - 当调用 hide 实例方法时触发。");
    });
    $('#modal').on('hiden.bs.modal',function(){
      console.log(new Date().toLocaleString() +" 	当模态框完全对用户隐藏时触发。");
    });

  });
</script>

WeiyiGeek.

3.下拉菜单（Dropdown）

使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单

基础用法:

(1)通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单，如下所示： 
<div class="dropdown">
  <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> </ul>
</div>

#如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"：
<div class="dropdown">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    下拉菜单（Dropdown） <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"></ul>
</div>


(2)通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法： 
$(function() {
    $(".dropdown-toggle").dropdown('toggle');
});

4.滚动监听（Scrollspy）

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

用法:

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

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

属性和方法:

选项名称	类型/默认值	Data 属性名称	描述
offset	number 默认值：10	data-offset	当计算滚动位置时，距离顶部的偏移像素。

 .scrollspy('refresh')：当通过 JavaScript 调用 scrollspy 方法时，您需要调用 .refresh 方法来更新 DOM。
 在 DOM 的任意元素发生变更（即，您添加或移除了某些元素）时非常有用
 $('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

事件：

activate.bs.scrollspy	每当一个新项目被滚动监听激活时，触发该事件。	
$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // 执行一些动作...
})

基础实例:

<!-- 关键点 -->
<nav id="myScrp" class="navbar navbar-default navbar-static" role="navigation">
  <div class="container-fluid"> 
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-js-navbar-scrollspy"> <!-- 导航栏 自适应 -->
        <span class="sr-only">切换导航</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">教程名称</a> <!-- 导航栏标题-->
    </div>
    <div class="collapse navbar-collapse bs-js-navbar-scrollspy">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#ios">iOS</a></li>
        <li><a href="#svn">SVN</a></li>
        <li class="dropdown">
          <a href="#" id="navbarDrop1" class="dropdown-toggle"  data-toggle="dropdown">Java <b class="caret"></b></a> <!-- 下拉菜单 -->
          <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1"> <!-- 下拉触发列表-->
            <li><a href="#jmeter" tabindex="-1">jmeter</a></li>
            <li><a href="#ejb" tabindex="-1">ejb</a></li>
            <li class="divider"></li>
            <li><a href="#spring" tabindex="-1">spring</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<div data-spy="scroll" data-target="#myScrp" data-offset="0" style="height: 200px; overflow: auto; position: relative;">
  <div class="section">
    <h4 id="ios">iOS<small><a href="#" onclick="removeSection(this);"> 
      &times; 删除该部分</a></small>
    </h4>
    <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
      TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
  </div>
  <div class="section">
    <h4 id="svn">SVN<small></small></h4>
    <p>Apache Subversion，通常缩写为 SVN，是一款开源的版本控制系统软件。Subversion 由 CollabNet 公司在 2000 年创建。但是现在它已经发展为 Apache Software Foundation 的一个项目，因此拥有丰富的开发人员和用户社区。</p>
  </div>
  <div class="section">
    <h4 id="jmeter">jMeter<small><a href="#" onclick="removeSection(this);">
      &times; 删除该部分</a></small>
    </h4>
    <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
  </div>
  <div class="section">
    <h4 id="ejb">EJB</h4>
    <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
  </div>
  <div class="section">
    <h4 id="spring">Spring</h4>
    <p>Spring 框架是一个开源的 Java 平台，为快速开发功能强大的 Java 应用程序提供了完备的基础设施支持。</p>
    <p>Spring 框架最初是由 Rod Johnson 编写的，在 2003 年 6 月首次发布于 Apache 2.0 许可证下。</p>
  </div>
</div>
<span id="activeitem" style="color:red;">滚动监听（Scrollspy）事件</span>
</div>

<script>
//移除操作
$(function(){
removeSection = function(e) {
    $(e).parents(".section").remove();  //移除父元素
    $('[data-spy="scroll"]').each(function () {
   	   var $spy = $(this).scrollspy('refresh')
    });
}

$("#myScrollspy").scrollspy();

//Nav标签ID
$('#myScrp').on('activate.bs.scrollspy', function () {
    var currentItem = $(".nav li.active > a").text();
    console.log(currentItem);
    $("#activeitem").html("目前您正在查看 - " + currentItem);
    });
});
</script>

WeiyiGeek.

水平滚动监听 (首页常用)

<body data-spy="scroll" data-target=".navbar" data-offset="50" style="position: relative; ">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        ...
      <ul class="nav navbar-nav">
        <li><a href="#section1">Section 1</a></li>  
        ...
       </div>
    </nav>
    <div id="section1" class="container-fluid">
        <h1>Section 1</h1>
    </div>
    <div id="section2" class="container-fluid">
        <h1>Section 2</h1>
    </div>
    <div id="section3" class="container-fluid">
        <h1>Section 3</h1>
    </div>
    <div id="section41" class="container-fluid">
        <h1>Section 4 Submenu 1</h1>
    </div>
    <div id="section42" class="container-fluid">
        <h1>Section 4 Submenu 2</h1>
    </div>
</body>

创建垂直滚动监听:

<style>
    ul.nav-pills {
        top: 20px;
        position: fixed;  /**元素浮动**/
    }
    div.col-sm-9 div {
        height: 250px;
        font-size: 28px;
    }
    #section-1 {color: #fff; background-color: #1E88E5;}
    #section-2 {color: #fff; background-color: #673ab7;}
    #section-3 {color: #fff; background-color: #ff9800;}
    #section-4 {color: #fff; background-color: #00bcd4;}
    #section-5 {color: #fff; background-color: #009688;}

    /** 不遮挡 nav 标签展示**/
    @media screen and (max-width: 810px) {
        #section-1, #section-2, #section-3, #section-4, #section-5  {
            margin-left: 150px;
        }
    }
</style>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20" style="position: relative;">  <!-- 关键点-->
  <div class="container">
    <div class="row">
      <nav class="col-sm-3" id="myScrollspy">  <!-- 关键点-->
        <div class="container-fluid"> 
          <ul class="nav nav-pills nav-stacked">  <!-- 关键点-->
            <li class="active"><a href="#section-1">Section-1</a></li>
            <li><a href="#section-2">Section-2</a></li>
            <li><a href="#section-3">Section-3</a></li>
            <li class="dropdown">
              <a  class="dropdown-toggle" data-toggle="dropdown" href="#">Other <span class="caret"></span></a>  <!-- 关键点-->
              <ul class="dropdown-menu">
                <li><a href="#section-4">Section-4</a></li>
                <li><a href="#section-5">Section-5</a></li>
              </ul>
            </li>
          </ul>
        </div>
      </nav>
      <div class="col-sm-9">
        <div id="section-1">
          <h1>Section1</h1>
          <p>Try to scroll</p>
        </div>
        <div id="section-2">
          <h1>Section2</h1>
          <p>Try to scroll</p>
        </div>
        <div id="section-3">
          <h1>Section3</h1>
          <p>Try to scroll</p>
        </div>
         <div id="section-4">
          <h1>Section4</h1>
          <p>Try to scroll</p>
        </div>
        <div id="section-5">
          <h1>Section5</h1>
          <p>Try to scroll</p>
        </div>
      </div>
    </div>
  </div>

WeiyiGeek.

5.标签页（Tab）

描述:通过结合一些 data 属性，您可以轻松地创建一个标签页界面;通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。

用法:

(1)通过 data 属性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。 
    - 添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式
    - 添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。
 <ul class="nav nav-tabs">
    <li><a href="#identifier" data-toggle="tab">Home</a></li>
</ul>

(2)通过 JavaScript：您可以使用 Javascript 来启用标签页，如下所示： 
$('#myTab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')
// 选取第一个标签页
$('#myTab a:first').tab('show')
// 选取最后一个标签页
$('#myTab a:last').tab('show')
// 选取第三个标签页（从 0 开始索引）
$('#myTab li:eq(2) a').tab('show')

方法:

.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。

事件:

事件	描述	实例
show.bs.tab	该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。	$('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // 激活的标签页 e.relatedTarget // 前一个激活的标签页 })
shown.bs.tab	该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。	$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { e.target // 激活的标签页 e.relatedTarget // 前一个激活的标签页 })

基础实例:

  <nav id="tabdemo">
    <ul class="nav nav-pills">
      <li class="active"><a href="#home" data-toggle="pill">首页</a></li>
      <li><a href="#ios" data-toggle="pill">ISO</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="myTab"> Java <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu" aria-labbledby="myTab">
          <li><a href="#jmeter" tabindex="-1" data-toggle="pill">jmeter</a></li>
          <li><a href="#ejb" tabindex="-1" data-toggle="pill">EJB</a></li>
        </ul>
      </li>
    </ul>
  </nav>
   
  <div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
      <p>首页是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
    </div>
    <div class="tab-pane fade" id="ios">
      <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
        TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
    </div>
    <div class="tab-pane fade" id="ejb">
      <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。</p>
    </div>
    <div class="tab-pane fade" id="jmeter">
      <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
    </div>
  </div>
  <div class="page-header">
    <p class="active-tab"><strong>当前激活的标签页</strong>：<span></span></p>
    <p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>
  </div>
</div>

<script>
  $(function(){
    //Js 调用
    $('#tabdemo li:eq(1) a').tab('show'); // 默认显示第二个tab 
      
   	//标签页事件
    $('a[data-toggle="pill"]').on('shown.bs.tab',function(e){
      var activeTab = $(e.target).text(); //获取当前已激活的标签页
      var previousTab = $(e.relatedTarget).text();// 获取前一个激活的标签页的名称
      $(".active-tab span").html(activeTab);
      $(".previous-tab span").html(previousTab);
    });
  });
</script>

WeiyiGeek.

6.提示工具（Tooltip）

提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息;

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）：

用法:

(1) 通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。 
<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

(2)通过 JavaScript 触发提示工具（tooltip）： 
$('#identifier').tooltip(options)
$(function () { $("[data-toggle='tooltip']").tooltip(); })

选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的

选项名称	类型/默认值	Data 属性名称	描述
animation	boolean 默认值：true	data-animation	提示工具使用 CSS 渐变滤镜效果。
html	boolean 默认值：false	data-html	向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement	string\	function 默认值：top	data-placement	规定如何定位提示工具（即 top\	bottom\	left\	right\	auto）。当指定为 auto 时，会动态调整提示工具。例如，如果 placement 是 “auto left”，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector	string 默认值：false	data-selector	如果提供了一个选择器，提示工具对象将被委派到指定的目标。
title	string \	function 默认值：’’	data-title	如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger	string 默认值：’hover focus’	data-trigger	定义如何触发提示工具： **click\	hover \	focus \	manual**。您可以传递多个触发器，每个触发器之间用空格分隔。
delay	number \	object 默认值：0	data-delay	延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： delay: { show: 500, hide: 100 }
container	string \	false 默认值：false	data-container	向指定元素追加提示工具。实例： container: ‘body’

方法:

Options: .tooltip(options)	//向元素集合附加提示工具句柄。	
$().tooltip(options)

Toggle: .tooltip('toggle')	//切换显示/隐藏元素的提示工具。	
$('#element').tooltip('toggle')

Show: .tooltip('show')	//显示元素的提示工具。	
$('#element').tooltip('show')

Hide: .tooltip('hide')	//隐藏元素的提示工具。	
$('#element').tooltip('hide')

Destroy: .tooltip('destroy')	//隐藏并销毁元素的提示工具。	
$('#element').tooltip('destroy')

事件：

show.bs.tooltip	    当调用 show 实例方法时立即触发该事件。	
shown.bs.tooltip	当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。	
hide.bs.tooltip	     当调用 hide 实例方法时立即触发该事件。	
hidden.bs.tooltip	当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。	
$('#myTooltip').on('show.bs.tooltip', function () {
  // 执行一些动作...
})

基础实例:

<div class="container">
  <h4>工具提示（Tooltip）插件 - 锚</h4> <!-- data-toggle 是显示 -->
  这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" title="默认的 Tooltip" data-delay="{show: 500, hide: 3000}">默认的 Tooltip</a>.
  这是一个 <a href="#" class="tooltip-event" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a>.
  这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</a>.
  这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</a>.
  这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</a>
  <br>
  <h4>工具提示（Tooltip）插件 - 按钮</h4>
  <button type="button" class="btn btn-default" data-toggle="tooltip"  title="默认的 Tooltip"> 默认的 Tooltip</button>
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip
  </button>
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip
  </button>
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip
  </button>
  <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</button>
  <p class="tooltip-options" >
    这是一个 
  <a href="#"  class="tooltip-options" data-toggle="tooltip" title="am Header2">Tooltip 方法 options</a>. <!-- 貌似插入 html 不行 -->
  </p>
</div>

<script>
  $(function () { 
    $("[data-toggle='tooltip']").tooltip({delay: { show: 500, hide: 1000 }});  //延迟显示和隐藏时间
    $('.tooltip-show').tooltip('show');  //显示和隐藏
    $('.tooltip-hide').tooltip('hide');
    $('.tooltip-destroy').tooltip('destroy');
    $('.tooltip-toggle').tooltip('toggle');  //有切换的动画
  })
  $(function () { 
    $(".tooltip-options a").tooltip({html : true });
    $('.tooltip-event').on('show.bs.tooltip', function (e) {
        console.log("当前点击了：" + e.target.firstChild.textContent);  //当前点击了：左侧的 Tooltip
      })
    });
</script>

7.弹出框（Popover）

描述:弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图,如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。

用法:

(1)通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可;
   锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。 
   
(2)通过 JavaScript：通过 JavaScript 启用弹出框（popover）： 
   $('#identifier').popover(options)
   $(function () { $("[data-toggle='popover']").popover(); }); //使用下面的脚本来启用页面中的所有的弹出框（popover）

选项:popover({选项值}）

animation	boolean 默认值：true	data-animation	向弹出框应用 CSS 褪色过渡效果。
html	boolean 默认值：false	data-html	向弹出框插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement	string\	function 默认值：top	data-placement	规定如何定位弹出框（即 top\	bottom\	left\	right\	auto）。当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 “auto left”，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector	string 默认值：false	data-selector	如果提供了一个选择器，弹出框对象将被委派到指定的目标。
title	string \	function 默认值：’’	data-title	如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger	string 默认值：’hover focus’	data-trigger	定义如何触发弹出框： **click\	hover \	focus \	manual**。您可以传递多个触发器，每个触发器之间用空格分隔。
delay	number \	object 默认值：0	data-delay	延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： delay: { show: 500, hide: 100 }
container	string \	false 默认值：false	data-container	向指定元素追加弹出框。实例： container: ‘body’

方法:

Options: .popover(options)	#向元素集合附加弹出框句柄。	
$().popover(options)

Toggle: .popover('toggle')	#切换显示/隐藏元素的弹出框。	
$('#element').popover('toggle')

Show: .popover('show')	#显示元素的弹出框。	
$('#element').popover('show')

Hide: .popover('hide')	#隐藏元素的弹出框。	
$('#element').popover('hide')

Destroy: .popover('destroy')	#隐藏并销毁元素的弹出框。	
$('#element').popover('destroy')

事件:

show.bs.popover	    当调用 show 实例方法时立即触发该事件。	
shown.bs.popover	当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。	
hide.bs.popover	    当调用 hide 实例方法时立即触发该事件。	
hidden.bs.popover	当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。	
$('#mypopover').on('show.bs.popover', function () {
  // 执行一些动作...
})

基础示例:

<div class="page-header">
    <h4> 弹出框Popover <small>案例</small></h4>
    <p>测试信息</p>
</div>
<button type="button" class="btn btn-default" title="Popover Title" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的Popover内容">左侧</button>
<button type="button" class="btn btn-primary" title="Popover Title" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部的Popover内容">顶部</button>
<button type="button" class="btn btn-success" title="Popover Title" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部的Popover内容">底部</button>
<button type="button" class="btn btn-warning" title="Popover Title" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧的Popover内容">右侧</button>
<p class="popover-options" style="display:flex;margin-top: 20px;">
    <a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>" data-container="body" data-toggle="popover" data-content="<h4>Popover 中的一些内容 —— options 方法</h4>"> Popover </a>
</p>
<button type="button" class="btn btn-danger" onclick="reset()">取消弹出框显示</button>
</div>


<script>
  $(function () { $('[data-toggle="popover"]').popover({ delay: { show: 500, hide: 800}, html: true});}); //延迟显示效果,注意不能
  $(function () { $('.btn-primary').popover('show');});
  $(function () { $('.btn-default').popover('hide');});
  $(function () { $('.popover-destroy').popover('destroy');});
  $(function () { $('.btn-success').popover('toggle');});
  $(function () {
    $(".btn-warning").on('show.bs.popover',function(){
      console.log("调用 show 实例方法时立即触发该事件");
    })
    $(".btn-warning").on('shown.bs.popover',function(){
      console.log("当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。");
    })
    $(".btn-warning").on('hide.bs.popover',function(){
      console.log("当调用 hide 实例方法时立即触发该事件。");
    })
    //hiden没效果
    $(".btn-warning").on('hiden.bs.popover',function(){
      console.log("当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。");
    })
  });
  //按钮重置
  function reset(){
    $(function(){
      $('[data-toggle="popover"]').popover('hide');
   });
  }
</script>

8.警告框（Alert）

描述:警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息

用法:

(1) 通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。 
<a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>

(2) 通过 JavaScript：通过 JavaScript 添加可取消功能： 
$(".alert").alert()

方法：

#如需在关闭时启用动画效果，请确保添加了 .fade 和 .in class。
.alert()	#该方法让所有的警告框都带有关闭功能。	
$('#identifier').alert();

关闭方法 .alert('close')	#关闭所有的警告框。	
$('#identifier').alert('close');

事件:

close.bs.alert	当调用 close 实例方法时立即触发该事件。	
closed.bs.alert	当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。	
$('#myalert').bind('close.bs.alert', function () {
  // 执行一些动作...
})

基础示例:

<div class="container">
    <div id="alert1" class="alert alert-success">
      <a href="#" class="close" data-dismiss="alert">&times;</a>
      <strong>警告!网络链接正常!</strong>
    </div>
    <div id="alert2" class="alert alert-warning">
      <a href="#" class="close" data-dismiss="alert">&times;</a>
      <strong>警告!网络链接异常!</strong>
    </div>
</div>

<script>
$(function(){
  $(".alert").click(function(){
    $("#alert1").alert('close');
    $("#alert2").alert();
  });

  $(function(){
    $(".alert").bind('close.bs.alert',function(){
      console.log('警告框被打开！')
    })
    $(".alert").bind('closed.bs.alert',function(){
      alert("警告消息框被关闭");
    })
  })
})
</script>

9.按钮（Button）

描述:添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。

用法:

(1) 基础属性即可
data-loading-text="Loading..." #加载状态
data-toggle="button"           #单个切换
data-toggle="buttons"          #添加复选框组的切换 、 单选按钮（Radio）

(2) 通过 JavaScript 启用按钮（Button）插件
$('.btn').button()

方法：

button('toggle')	#切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。 	
$().button('toggle')

.button('loading')	#当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。 	
$().button('loading')

.button('reset')	#重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。 
$().button('reset')

.button(string)	#该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。 	
$().button(string)

基础示例:

<div class="page-header">
  <h4>按钮Button插件<small>示例</small></h4>
</div>
<div class="row">
  <h4>演示 .button('toggle') 方法</h4>
  <div id="myButtons1" class="bs-example"><button type="button" class="btn btn-primary">原始</button></div>

  <p>加载状态：</p>
  <button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button"><span class="glyphicon glyphicon-tint"></span> 加载状态(方式1)</button>
  <button id="fat-btn1" class="btn btn-primary" data-loading-text="Loading finished" type="button"><span class="glyphicon glyphicon-tint"></span> 加载状态(方式2)</button>
  <button id="reset" class="btn btn-default">恢复默认</button>
  <hr>
  <p>单个切换</p>
  <button type="button" class="btn btn-primary" data-toggle="button"> 单个切换</button>

  <p>复选框（Checkbox）</p>
  <div class="btn-group" data-toggle="buttons">
    <label for="opt1" class="btn btn-primary btn-lg">
      <input type="checkbox" name="option1" id="opt1"> 选项1
    </label>
    <label for="opt2" class="btn btn-primary btn-lg">
      <input type="checkbox" name="option2" id="opt2"> 选项2
    </label>
    <label for="opt3" class="btn btn-primary btn-lg">
      <input type="checkbox" name="option3" id="opt3"> 选项3
    </label>
  </div>

  <p>单选按钮（Radio）</p>
  <div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> 选项 1
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> 选项 2
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> 选项 3
    </label>
</div>
</div>
<script>
//按钮插件学习定时完成后显示下载完成
 $(function(){

//默认按压 演示 .button('toggle') 方法
  $("#myButtons1 .btn").click(function(){
      $(this).button('toggle');
    });


//演示 .button('loading') 方法
   $("#fat-btn").click(function(){
      $(this).button('loading').delay(1000).queue(function(){
      $("#fat-btn").html('<span class="glyphicon glyphicon-ok"> </span> 操作完成')
    })
  

//演示 .button(string) 方法
    $("#fat-btn1").click(function(){
        $(this).button('loading').delay(1000).queue(function(){
        $(this).button('complete');   //完成后选择，再次点击则不能选择
      });
    });
   });


//演示 .button('reset') 方法
   $("#reset").click(function(){
      $("#fat-btn").button('reset');  //恢复原始 可以采用 $(this) 形式指代 本对象
   });
 })
</script>

WeiyiGeek.

10.折叠（Collapse）

描述:折叠（Collapse）插件可以很容易地让页面区域折叠起来。常常和面板类class .panel 进行连用

基础属性:

.panel-collapse #面板折叠类
.collapse       #需要折叠的元素
.in             #默认显示折叠元素

- data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。
- href 或 data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上,Href设置折叠元素的id锚
- data-target="" 可以创建不带 accordion 标记的简单的可折叠组件（collapsible）；

parent	selector 默认值：false	data-parent	如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与传统的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类
toggle	boolean 默认值：true	data-toggle	切换调用可折叠元素。

方法：

#Options: .collapse(options)	激活内容为可折叠元素。接受一个可选的 options 对象。	
$('#identifier').collapse({
    toggle: false;
})

#Toggle: .collapse('toggle')	切换显示/隐藏可折叠元素。	
$('#identifier').collapse('toggle')

#Show: .collapse('show')	显示可折叠元素。	
$('#identifier').collapse('show')

#Hide: .collapse('hide')	隐藏可折叠元素。	
$('#identifier').collapse('hide')

事件:

show.bs.collapse	在调用 show 方法后触发该事件。	
shown.bs.collapse	当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。	
hide.bs.collapse	当调用 hide 实例方法时立即触发该事件。	
hidden.bs.collapse	当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。	
$('#identifier').on('show.bs.collapse', function () {
    // 执行一些动作...
})

基础实例:

<div class="container">
    <!-- 面板组-->
  <div class="panel-group" id="accrodin">
    <div class="panel panel-default"> 
      <div class="panel-heading">
        <h4 class="panel-title">
          <a href="#collapseone" data-toggle="collapse" data-parent="#accrodin"> 进行折叠第一个部分</a>
        </h4>
      </div>
    <div class="panel-collapse collapse in" id="collapseone">
      <div class="panel-body">
        WeiyiGeek 测试 折叠 (collapse);
      </div>
    </div>
  </div>

    <div class="panel panel-default">
      <div class="panel-heading">
      <h4 class="panel-title">
        <a href="#collapsetwo" data-toggle="collapse" data-parent="#accrodin">进行折叠第二个部分</a>
      </h4>
    </div>
  
    <div class="panel-collapse collapse" id="collapsetwo">
      <div class="panel-body">
        WeiyiGeek 测试 折叠 (collapse);
      </div>
    </div>
    </div>
    </div>

  <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapsethree">进行折叠</button>
  <div id="collapsethree" class="collapse in">
     Like Bootstrap collapse 
  </div>
  <button type="button" class="btn btn-warning" id="tg">按钮点击切换</button>
</div>


<script>
  //Collapse 事件触发
$(function(){
  $('#tg').click(function(){
    $("#collapsethree").collapse('toggle');
  });

  $("#collapsethree").on('show.bs.collapse',function(){
    console.log("折叠显示");
  })
  $("#collapsethree").on('hide.bs.collapse',function(){
    console.log("折叠隐藏");
  })
});
</script>

WeiyiGeek.Collapse

11.轮播（Carousel）

描述:一种灵活的响应式的向站点添加滑块的方式，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

基础属性：

.carousel #轮播 div
slide     #幻灯片滑动

.carousel-indicators #轮播（Carousel）指标 ol
.carousel-inner  #轮播（Carousel）项目 div
.item             #元素项目
.carousel-caption #元素向幻灯片添加标题
.active   #幻灯片轮播以及激活显示

carousel-control left #轮播（Carousel）导航控制左
carousel-control right #轮播（Carousel）导航控制右

用法:


(1)通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
   属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
   使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
   data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
        
(2)通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：
    $('.carousel').carousel()

选项:

interval	number 默认值：5000	data-interval	自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pause	string 默认值：”hover”	data-pause	鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap	boolean 默认值：true	data-wrap	轮播是否连续循环。

方法:

.carousel(options)	初始化轮播为可选的 options 对象，并开始循环项目。	
$('#identifier').carousel({
    interval: 2000
})

.carousel('cycle')	从左到右循环轮播项目。	
.carousel('pause')	停止轮播循环项目。	
.carousel(number)	循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。	
.carousel('prev')	循环轮播到上一个项目。	
.carousel('next')	循环轮播到下一个项目。	
$('#identifier').carousel('next')

事件：

slide.bs.carousel	当调用 slide 实例方法时立即触发该事件。
slid.bs.carousel	当轮播完成幻灯片过渡效果时触发该事件。

基础示例:

<div class="container">
<div class="row">
  <div class="col-md-9">
  <h4> 轮播（Carousel）案例演示  </h4>
    <!--- 注意属性Carousel轮播-->
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="3000">
      <!-- 轮播（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="https://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt="First slide">
        <div class="carousel-caption">图片1标题</div>
        </div>
        <div class="item">
        <img src="https://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt="Second slide">
        <div class="carousel-caption">图片2标题</div>
        </div>
        <div class="item">
        <img src="https://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
        <div class="carousel-caption">图片3标题</div>
        </div>
      </div>
      <!-- 轮播（Carousel）导航 -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <!-- 控制按钮 -->
    <div class="input-group-btn" style="text-align:center;">
      <input type="button" class="btn start-slide" value="Start">
      <input type="button" class="btn pause-slide" value="Pause">
      <input type="button" class="btn prev-slide" value="Previous Slide">
      <input type="button" class="btn next-slide" value="Next Slide">
      <input type="button" class="btn slide-one" value="Slide 1">
      <input type="button" class="btn slide-two" value="Slide 2">
      <input type="button" class="btn slide-three" value="Slide 3">
    </div>
    </div>
  </div>
</div>
    
<script>
//carousel 属性方法
$(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({interval: 2000});
       	    $("#myCarousel").carousel(0);
		});
		$(".slide-two").click(function(){
			$("#myCarousel").carousel(1);
		});
		$(".slide-three").click(function(){
			$("#myCarousel").carousel(2);
		});

//事件触发:
$("#myCarousel").on("slide.bs.carousel",function(){
    alert('轮播开始');
 });
$("#myCarousel").on("slid.bs.carousel",function(){
    alert('轮播结束');
 });
});    
</script>

WeiyiGeek.Carousel轮播

12.附加导航（Affix）

描述:附加导航（Affix）插件允许指定<div> 固定在页面的某个位置;它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。

语法:

(1)通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy="affix" 即可。请使用偏移来定义何时切换元素的锁定和移动。 

(2)通过 JavaScript：您可以通过 JavaScript 手动为某个元素添加附加导航（Affix）;
$('#myAffix').affix({
   offset: {
      top: 100, bottom: function () {
         return (this.bottom = 
            $('.bs-footer').outerHeight(true))
         }
      }
})

附加导航（Affix）插件在三种 class 之间切换，每种 class 都呈现了特定的状态：.affix、.affix-top 和 .affix-bottom

.affix     #开启附加导航 (此时 .affix 会替代 .affix-top，同时设置 position: fixed;（由 Bootstrap 的 CSS 代码提供）。)
.affix-top #指示元素在它的最顶端位置, 注意这个时候不需要任何的 CSS 定位。
.affix-bottom #指示元素在它的最底端位置, 如果定义了底部偏移当滚动到达该位置时，应把 .affix 替换为 .affix-bottom

#选项
offset	number | function | object  默认值：10
#data-offset	当计算滚动位置时，距离顶部的偏移像素。如果设置了一个数字，则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移，则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移，请使用函数。

基础示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> Bootstrap 插件</title>
  <!-- Boostrap 样式库-->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
  ul.nav-tabs{
        width: 140px;
        margin-top: 20px;
        border-radius: 4px;
        border: 1px solid #ddd;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    }
    ul.nav-tabs li{
        margin: 0;
        border-top: 1px solid #ddd;
    }
    ul.nav-tabs li:first-child{
        border-top: none;
    }
    ul.nav-tabs li a{
        margin: 0;
        padding: 8px 16px;
        border-radius: 0;
    }
    ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
        color: #fff;
        background: #0088cc;
        border: 1px solid #0088cc;
    }
    ul.nav-tabs li:first-child a{
        border-radius: 4px 4px 0 0;
    }
    ul.nav-tabs li:last-child a{
        border-radius: 0 0 4px 4px;
    }
    /* Set the top position of pinned element */
    ul.nav-tabs.affix{
        top: 30px; 
    }
  </style>
</head>
<body data-spy="scroll" data-target="#myScroll">
<div class="container">
  <div class="jumbotron">
      <h1>Bootstrap<small> Affix </small></h1>
  </div>
  <div class="row">
    <div class="col-xs-3 hidden-xs" id="myScroll">
      <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125" id="myNav">
        <li class="active"><a href="#section1">第一部分</a></li>
        <li><a href="#section2">第2部分</a></li>
        <li><a href="#section3">第3部分</a></li>
        <li><a href="#section4">第4部分</a></li>
        <li><a href="#section5">第5部分</a></li>
      </ul>
    </div> 
    <div class="col-xs-9">
      <div class="page-header" id="section1">
        <h2>WeiyiGeek <small>测试</small></h2>
        <p>第1部分 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,</p>
      </div>
      <div class="page-header" id="section2">
        <h2>WeiyiGeek <small>测试</small></h2>
        <p>第2部分 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,</p>
      </div>
      <div class="page-header" id="section3">
        <h2>WeiyiGeek <small>测试</small></h2>
        <p>第3部分 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,</p>
      </div>
      <div class="page-header" id="section4">
        <h2>WeiyiGeek <small>测试</small></h2>
        <p>第4部分 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,</p>
      </div>
      <div class="page-header" id="section5">
        <h2>WeiyiGeek <small>测试</small></h2>
        <p>第5部分 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,</p>
      </div>
    </div>
  </div>
</div>

<script>
  //采用JS进行属性设置
  $(document).ready(function(){
      $("#myNav").affix({
          offset: { top: 125 }
      });
  });
</script>