Bootstrap学习文档（四）

Bootstrap

模态框

注意：
1、弹出层必需放在body里
2、弹出层里面不能再嵌套别的层
3、弹出层出来以后，页面的滚动条会被覆盖

modal 弹出层父级
modal-dialog 弹出层
modal-content 弹出层的内容区域
modal-header 弹出层的头部区域
modal-body 弹出层的主体区域
modal-footer 弹出层的底部区域
fade 让弹出层有一个运动的效果，加给弹出层父级

示例代码如下：

模态框又有大小，modal-lg 大模态框，modal-sm 小模态框，默认是中等模态框。

<div class="container">
  <div class="row">
    <button class="btn btn-primary" data-toggle="modal" data-target=".myModal1">弹出一个小层</button>
    <button class="btn btn-primary" data-toggle="modal" data-target=".myModal2">弹出一个大层</button>
    <button class="btn btn-primary" data-toggle="modal" data-target=".myModal3">弹出一个小小的层</button>
  </div>
</div>

<div class="modal fade myModal1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h4>爱秋的艳</h4>
      </div>
      <div class="modal-body">
        <p>爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳</p>
        <p>爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">确定</button>
      </div>
    </div>
  </div>
</div>


<div class="modal myModal2">
  <div class="modal-dialog  modal-lg"><!--modal-lg是用来设置弹出层的尺寸，它必需给modal-dialog的层-->
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h4>爱秋的艳</h4>
      </div>
      <div class="modal-body">
        <p>爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳</p><p>爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">确定</button>
      </div>
    </div>
  </div>
</div>

<div class="modal myModal3">
  <div class="modal-dialog  modal-sm"><!--modal-lg是用来设置弹出层的尺寸，它必需给modal-dialog的层-->
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h4>爱秋的艳</h4>
      </div>
      <div class="modal-body">
        <p>爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳</p><p>爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳爱秋的艳</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal">确定</button>
      </div>
    </div>
  </div>
</div>

滚动监听

步骤：
1、谁要滚动就要给它添加 data-spy="scroll"，并且需要添加一个 data-target，这个值要与导航的父级相关联
2、给导航的父级添加一个 id 或者 class，要与要滚动的元素的 data-target 的值一致，并且要添加一个 navbar-collapse 的 class
3、导航里面的每个 a 标签都需要添加上一个锚链接，这样的话，才能与滚动对上号
4、滚动区域里的内容的标题要添加上相应的 id，用于与导航的锚链接对应

示例代码如下：

下面的代码取自 Bootstrap 官网，另外需要给滚动监听加上样式，不然还是没有效果的，使用起来不太简单。

<style>
      #subNav{
        position: fixed;
        top: 0;
      }
      
      .nav a{
        color: #666;
        
      }
      .nav ul{
        display: none;
      }
      .nav .active ul{
        display: block;
        padding-left: 20px;
      }
      .nav > li > a {
          padding: 5px 15px;
      }
      .nav .active > a{
        color: #f00;
        border-left: 1px solid #f00;
      }
      
      .nav .active .bold{
        font-weight: bold;
        border-left: 3px solid #f00;
        font-size: 20px;
      }
    </style>

<div class="container">
  <div class="row">
    <!-- 这里给个padding值是为了让下面的内容上去，可以试试去掉的效果 -->
    <div class="col-lg-9" style="padding-bottom: 500px;">
      <div class="section">
        <h2 id="gaishu">概览</h2>
        <h3 id="dange">单个还是全部引入</h3>
        <p>JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 <code>*.js</code> 文件），或者一次性全部引入（使用 <code>bootstrap.js</code> 或压缩版的 <code>bootstrap.min.js</code>）。</p>
        <p>建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。</p>
        <p>插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。</p>
        <h3 id="datashuxing">data 属性</h3>
        <p>你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。</p>
        <p>话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：</p>
        <p>
          <pre>$(document).off('.data-api')</pre>
        </p>
        <p>另外，如果是针对某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：</p>
        <p>
          <pre>$(document).off('.alert.data-api')</pre>
        </p>
        <h3 id="biancheng">编程方式的 API</h3>
        <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
        <h3 id="bimian">避免命名空间冲突</h3>
        <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
        <h3 id="shijian">事件</h3>
        <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
        <h3 id="weidui">未对禁用 JavaScript 的浏览器提供补救措施</h3>
        <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
      </div>
      
      <div class="section">
        <h2 id="guodu">过渡效果</h2>
        <h3 id="guanyu">关于过渡效果</h3>
        <p>JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 <code>*.js</code> 文件），或者一次性全部引入（使用 <code>bootstrap.js</code> 或压缩版的 <code>bootstrap.min.js</code>）。</p>
        <p>建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。</p>
        <p>插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。</p>
        <h3 id="baohan">包含的内容</h3>
        <p>你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。</p>
        <p>话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：</p>
        <p>
          <pre>$(document).off('.data-api')</pre>
        </p>
        <p>另外，如果是针对某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：</p>
        <p>
          <pre>$(document).off('.alert.data-api')</pre>
        </p>
      </div>
      
      <div class="section">
        <h2 id="shili">实例</h2>
        <h3 id="jingtai">静态实例</h3>
        <p>JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 <code>*.js</code> 文件），或者一次性全部引入（使用 <code>bootstrap.js</code> 或压缩版的 <code>bootstrap.min.js</code>）。</p>
        <p>建议使用压缩版的 JavaScript 文件bootstrap.js 和 bootstrap.min.js 都包含了所有插件，你在使用时，只需选择一个引入页面就可以了。</p>
        <p>插件之间的依赖关系某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本。</p>
        <h3 id="dongtai">动态实例</h3>
        <p>你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。</p>
        <p>话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：</p>
        <p>
          <pre>$(document).off('.data-api')</pre>
        </p>
        <p>另外，如果是针对某个特定的插件，只需在 data-api 前面添加那个插件的名称作为命名空间，如下：</p>
        <p>
          <pre>$(document).off('.alert.data-api')</pre>
        </p>
        <h3 id="kexuan">可选尺寸</h3>
        <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
        <h3 id="jinzhi">禁止动画效果</h3>
        <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
        <h3 id="yongfa">用法</h3>
        <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
        <h3 id="tongguo1">通过 data 属性</h3>
        <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
        <h3 id="tongguo">通过 JavaScript 调用</h3>
        <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
        <h3 id="canshu">参数</h3>
        <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
        <h3 id="fangfa">方法</h3>
        <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
        <h3 id="shijian2">事件</h3>
        <p>我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。</p>
        <p>$('.btn.danger').button('toggle').addClass('fat')</p>
        <p>所有方法都可以接受一个可选的 option 对象作为参数，或者一个代表特定方法的字符串，或者什么也不提供（在这种情况下，插件将会以默认值初始化）：</p>
      </div>
    </div>
    <div class="col-lg-3">
      <div id="subNav" class="navbar-collapse">
        <ul class="nav">
          <li>
            <a href="#gaishu" class="bold">概览</a>
            <ul class="nav">
              <li><a href="#dange">单个还是全部引入</a></li>
              <li><a href="#datashuxing">data 属性</a></li>
              <li><a href="#biancheng">编程方式的 API</a></li>
              <li><a href="#bimian">避免命名空间冲突</a></li>
              <li><a href="#shijian">事件</a></li>
              <li><a href="#weidui">未对禁用 JavaScript 的浏览器提供补救措施</a></li>
            </ul>
          </li>
          <li>
            <a href="#guodu" class="bold">过渡效果</a>
            <ul class="nav">
              <li><a href="#guanyu">关于过渡效果</a></li>
              <li><a href="#baohan">包含的内容</a></li>
            </ul>
          </li>
          <li>
            <a href="#shili" class="bold">实例</a>
            <ul class="nav">
              <li><a href="#jingtai">静态实例</a></li>
              <li><a href="#dongtai">动态实例</a></li>
              <li><a href="#kexuan">可选尺寸</a></li>
              <li><a href="#jinzhi">禁止动画效果</a></li>
              <li><a href="#yongfa">用法</a></li>
              <li><a href="#tongguo1">通过 data 属性</a></li>
              <li><a href="#tongguo">通过 JavaScript 调用</a></li>
              <li><a href="#canshu">参数</a></li>
              <li><a href="#fangfa">方法</a></li>
              <li><a href="#shijian2">事件</a></li>
            </ul>
          </li>
        </ul>
      </div>  
    </div>
  </div>
</div>

提示标签

在 a 标签上，可以加上提示，需要加上 title 属性，里面放上提示语。但在 Bootstrap 中也有更多的效果，可以变显示方向，但需要js的代码。

data-placment="top（bottom）（left）（right）" 决定标签弹出来的方向

示例代码如下：

<style>
  p{
    margin: 200px 0;
  }
</style>

<div class="container">
  <div class="row">
    <p><a href="#" class="tool" data-toggle="tooltip" data-placement="top" title="我爱你">爱秋的艳</a>程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛<a href="#" class="tool" data-toggle="tooltip" data-placement="right" title="我爱你">爱秋的艳</a>程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛<a href="#" class="tool" data-toggle="tooltip" data-placement="bottom" title="我爱你">爱秋的艳</a>程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛<a  href="#" class="tool" data-toggle="tooltip" data-placement="left" title=我爱你">爱秋的艳</a>程序猿爱程序媛</p>
  </div>
  
  <div class="row">
    <button class="btn btn-primary tool" data-toggle="tooltip" title="code" data-placement="top">code</button><br /><br />
    <button class="btn btn-primary tool" data-toggle="tooltip" title="code" data-placement="right">code</button><br /><br />
    <button class="btn btn-primary tool" data-toggle="tooltip" title="code" data-placement="bottom">code</button><br /><br />
    <button class="btn btn-primary tool btnShow" data-toggle="tooltip" title="code" data-placement="left">code</button>
  </div>
</div>

<!--注意放在 Bootstrap.js 文件的下面-->
<script>
  $('.tool').tooltip();
  $('.btnShow').tooltip('show');  //让某一个标签一上来就显示
</script>

提示框

提示框可以比提示标签提示更多的内容，它弹出来的是个小的对话框，用法和提示标签差不多。

示例代码如下

<style>
  .row{
    padding-top: 200px;
  }
</style>

<div class="container">
  <div class="row">
    <button class="btn btn-danger" data-toggle="popover" data-placement="top" title="这是弹框的标题" data-content="这是弹框的内容，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长">点击我给你弹出一个框</button><br /><br />
    <button class="btn btn-danger" data-toggle="popover" data-placement="right" title="这是弹框的标题" data-content="这是弹框的内容，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长">点击我给你弹出一个框</button><br /><br />
    <button class="btn btn-danger" data-toggle="popover" data-placement="bottom" title="这是弹框的标题" data-content="这是弹框的内容，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长">点击我给你弹出一个框</button><br /><br />
    <button class="btn btn-danger btnShow" data-toggle="popover" data-placement="left" title="这是弹框的标题" data-content="这是弹框的内容，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长，它很长很长">点击我给你弹出一个框</button>
  </div>
</div>

<!--注意放在 Bootstrap.js 文件的下面-->
<script>
      $('.btn').popover();
      $('.btnShow').popover('show');  //让某一个提示框一上来就显示
</script>

折叠菜单

1.单个折叠菜单

制作步骤：
1、给要点击的那个元素添加一个 data-toggle="collapse"，并且需要给它添加一个data-target，让它的值与对应的内容区域的id或者class相同
2、给对应的内容区域添加一个id或者class，与点击的元素相对应

注意：

1、内容区域不能有padding值

<div class="container">
  <div class="row">
    <div class="col-lg-5">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">
            <a href="#" data-toggle="collapse" data-target="#con">程序媛</a>
          </h3>
        </div>
        <!--添上 in 的 class， 使得折叠菜单折叠后不在展开-->
        <div id="con" class="in">
          <div class="panel-body">
            程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛程序猿爱程序媛
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2.一组折叠菜单

1.把所有的面板都放到一个父级里，并且给父级添加一个panel-group，还有一个id
2.给要点击的元素添加一个data-parent属性，并让他的值与父级的id一样-
3.需要给内容区域添加一个class为collapse
示例代码如下：

<div class="container">
  <div class="row">
    <div class="col-lg-5">
      <!--1、把所有的面板都放到一个父级里，并且给父级添加一个panel-group，还有一个id-->
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <!--2、给要点击的元素添加一个data-parent属性，并让他的值与父级的id一样-->
            <h3 class="panel-title" data-parent="#accordion" data-toggle="collapse" data-target="#con1">爱秋的艳</h3>
          </div>
          <!--3、需要给内容区域添加一个class为collapse-->
          <div id="con1" class="collapse in">
            <div class="panel-body">
              程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿
            </div>
          </div>
        </div>
        
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title" data-parent="#accordion" data-toggle="collapse" data-target="#con2">爱秋的艳</h3>
          </div>
          <div id="con2" class="collapse">
            <div class="panel-body">
              程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿 程序媛爱程序猿
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

轮播图

1、写一个父级，放一个 id，和一个 carousel 的 class
slide 给图片添加运动的效果
data-interval="500" 间隔时间，单位为毫秒，1秒是等于1000毫秒的，不要低于400，否则容易出现问题
data-ride="carousel" 页面一加载后就开始播放
2、小圆点的内容要放在一个 class 为 carousel-indicators 的层里
3、图片内容区域要放在一个 class 为 carousel-inner 的层里，每一项内容都需要放到一个叫 item 的层里，这个里面也可以放文字，那需要来一个父级，父级的 class 为 carousel-caption
4、左右按钮按以下的格式写，href 里面的值要与父级的 id 一样
<a href="#pic" class="carousel-control left" data-slide="prev">‹</a>
<a href="#pic" class="carousel-control right" data-slide="next">›</a>

示例代码如下：

<div class="container">
  <div id="pic" class="carousel slide" data-interval="2000" data-ride="carousel">
    <!--小圆点-->
    <ol class="carousel-indicators">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
    <!--轮播图的图片-->
    <div class="carousel-inner">
      <div class="item active">
        ![](images/1.jpg)
        <div class="carousel-caption">
          <h3>这里是标题1</h3>
          <p>这里是内容，非常多非常多</p>
        </div>
      </div>
      <div class="item">
        ![](images/2.jpg)
        <div class="carousel-caption">
          <h3>这里是标题2</h3>
          <p>这里是内容，非常多非常多</p>
        </div>
      </div>
      <div class="item">
        ![](images/3.jpg)
        <div class="carousel-caption">
          <h3>这里是标题3</h3>
          <p>这里是内容，非常多非常多</p>
        </div>
      </div>
      <div class="item">
        ![](images/4.jpg)
        <div class="carousel-caption">
          <h3>这里是标题4</h3>
          <p>这里是内容，非常多非常多</p>
        </div>
      </div>
    </div>
    <!--左右按钮-->
    <a href="#pic" class="carousel-control left" data-slide="prev">‹</a>
    <a href="#pic" class="carousel-control right" data-slide="next">›</a>
  </div>
</div>

解决轮播图的高度问题：
1.使轮播图里面的图片自适应，添加 img-responsive 是没用的。

css代码如下：

#carousel-img.carousel-inner .item{ width: 100%;height: 0;padding-bottom: 50%;overflow: hidden;}
#carousel-img .carousel-inner .item img{width: 100%;}

2.轮播图的图片大小一致，但想改变轮播图的高度，改变父级 div 是无法改变图片的高度或者宽度。

css代码如下：

高度值要根据轮播图的图片定，这里是示例。

*解决轮播图的高度问题*/
.carousel, .carousel .item{
  height: 400px;
}
.carousel .item img{
  width: 100%;
}

@media only screen and (max-width:768px ) {
    .carousel, .carousel .item{
    height: 150px;
  }
  .carousel .item img{
    width: 100%;
  }
}

Bootstrap 系列：

Bootstrap学习文档（一）
Bootstrap学习文档（二）
Bootstrap学习文档（三）
Bootstrap学习文档（四）

最后编辑于：2017.12.10 04:57:56

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,496评论 6赞 501
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,407评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,632评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,180评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,198评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,165评论 1赞 299
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,052评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,910评论 0赞 274
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,324评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,542评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,711评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,424评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,017评论 3赞 326
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,668评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,823评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,722评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,611评论 2赞 353

Bootstrap学习文档（四）

模态框

滚动监听

提示标签

提示框

折叠菜单

1.单个折叠菜单

2.一组折叠菜单

轮播图

推荐阅读更多精彩内容