bootstrap学习总结-js组件(四)

这次我们来看下js组件的使用，本篇文章会有点长，希望大家可以耐心看，相信收获会有不少。不少园友加我好友，表示喜欢我写文字的风格，简单明了，这里，再次谢谢你们的支持。一方面，博主自身技术有限，写的东西都比较基础，另一方面，博主写的东西，都是根据自己的理解，把复杂的东西用最简单的语言表达出来。所以，写的有不对的地方，麻烦各位园友给予指正哈。

一：js文件引用

注意点：jquery必须在在其它js文件之前引入，因为其它插件都是依赖于jquery。

<!--<script src="js/jquery-1.11.3.min.js"></script>   本地引入的加载文件-->

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  --必须在bootstrp.min.js之前引入

<script src="js/bootstrap.min.js"></script>

二：data属性

作用：通过data属性，可使用任何的bootstrap插件，无须写任何一段js代码。前面讲过的像：data-toggle="dropdown"等引用菜单插件。

那么既然有打开功能，如何关闭功能呢？在javascript里面添加下面代码即可：

<script type="text/javascript">

      $(document).off('.data-api');

</script>

如果要关闭某一个特定的插件的功能，添加下面代码即可：

<script type="text/javascript">

      // 关闭提示框的插件功能

      $(document).off('.alert.data-api');

 </script>

所有的js插件基本都是下面几步：

1：如何使用？---类对应如何写？

2：如何调用？---类写好了，如何使其写的类生效？

3：事件处理---包括动作触发前发生以及动作出发后发生

注意：所有动作触发之前发生的，bootstrap提供了preventDefault,实现在动作执行之前将其停止。代码如下：

$('#myModal').on('show.bs.modal', function (e) {

  if (!data) return e.preventDefault() // 阻止模态框的展示，当然你也可换成阻止其它插件的出现

})

注意：bootstrap没有对禁用javascript的浏览器采取补救措施，因此，我们需要自己写一段代码补救，相信大家都知道。

<noscript> 你的浏览器不支持javascript，请下载最新的浏览器 </noscript>

三：模态框组件（modal.js）

注意点：

1：不支持同时打开多个模态框
      2：模态框尽量位于body子元素的位置，避免其它组件影响模态框的展现和功能
      3：移动端说明
      4：增强可访问性--添加role属性
      5：在模态框中可嵌入视屏，即data-toggle="modal"

我们来看下下面的列子，点击button，会弹出一个模态框，关于这里的属性，如果看过之前的文章，相信理解起来不难，这里不再详解，可自行贴码测试：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<title></title>

<link href="css/bootstrap.css" rel="stylesheet">

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/style.css" rel="stylesheet">

</head>

<body>

 <button  type="button"  class="btn  btn-primary  btn-lg"   data-toggle="modal"  data-target=".bs-example-modal-lg">

     弹出大模态框

 </button>

<div  class="modal  fade  bs-example-modal-lg"  id="mymodal"  tabindex="-1"  role="dialog"  aria-labelledby="myLargeModalLabel">

         <div  class="modal-dialog  modal-lg">--大的模态框

                 <div  class="modal-content">

                           <div  class="modal-header">

                                  <button  type="button"  class="close"  data-dismiss="modal"  aria-label="close">

                                        <span  aria-hidden="true">&times;</span>

                                  </button>

                                   <h4  class="modal-title">Modal  title</h4>

                          </div>

                          <div  class="modal-body">

                                    <p>one  fine  body &hellip;</p>

                           </div>

                          <div  class="modal-footer">

                                    <button  type="button"  class="btn  btn-default"  data-dismiss="modal">close</button>

                                     <button  type="button"  class="btn  btn-primary">save  changes</button>

                           </div>

                </div>

        </div>

</div>
<!-- 改变模态框的大小添加类modal-sm即可 -->
<button  type="button"  class="btn  btn-primary  btn-lg"   data-toggle="modal"  data-target=".bs-example-modal-sm">

     弹出小模态框

 </button>

<div  class="modal  fade  bs-example-modal-sm"  id="mymodal"   tabindex="-1"  role="dialog"    aria-labelledby="myLargeModalLabel">

         <div  class="modal-dialog  modal-sm"> ---小模态框

                 <div  class="modal-content">

                           <div  class="modal-header">

                                  <button  type="button"  class="close"  data-dismiss="modal"  aria-label="close">

                                        <span  aria-hidden="true">&times;</span>

                                  </button>

                                   <h4  class="modal-title">Modal  title</h4>

                          </div>

                          <div  class="modal-body">

                                    <p>one  fine  body &hellip;</p>

                           </div>

                          <div  class="modal-footer">

                                    <button  type="button"  class="btn  btn-default"  data-dismiss="modal">close</button>

                                     <button  type="button"  class="btn  btn-primary">save  changes</button>

                           </div>

                </div>

        </div>

</div>

<!--  禁止动画效果，删掉fade即可 -->

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

 <script src="js/bootstrap.min.js"></script>

 <script type="text/javascript">

      $("#mymodal").modal("show"); ---调用这句代码才能使插件生效

 </script>

</body>

</html>

实现效果如下：

结合模态框，你也可以给body内容增加其它功能，比如嵌入表单的输入框等，这里不再贴码。

模态框的事件，在javascript中添加下面的代码即可，如下所示：

 <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script type="text/javascript">
     $("#mymodal").modal("show"); ---调用这句代码才能使插件模态框生效显示出来
     $('#myModal').on('hidden.bs.modal', function (e) {

          alert("111");

     })    ---这个事件指当关闭模态框之后，alert事件将会被触发

</script>

我们来看看模态框如何嵌入视屏，自己需要添加一些代码，自动播放，停止等功能。先来看看代码

<a href="#" class="btn btn-default" data-toggle="modal" data-target="#videoModal" 
data-theVideo="http://v.youku.com/v_show/id_XMTU2ODMyMDUyMA==.html" >VIDEO</a>

<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-body">

        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

        <div>

             <iframe width="100%" height="350" src=""></iframe>

        </div>

      </div>

    </div>

  </div>

</div>

<!--  <script src="js/jquery-1.11.3.min.js"></script>   本地的加载文件-->

 <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

 <script src="js/bootstrap.min.js"></script>

 <script type="text/javascript">

 //视屏函数

  function autoPlayModal(){

          var trigger = $("body").find('[data-toggle="modal"]');

          trigger.click(function() {

            var theModal = $(this).data( "target" );

            var videoSRC = $(this).attr( "data-theVideo" );

            var videoSRCauto = videoSRC+"?autoplay=1" ;

            $(theModal+' iframe').attr('src', videoSRCauto);

            $(theModal+' button.close').click(function () {

                $(theModal+' iframe').attr('src', videoSRC);

    });

  });

}

//调用该函数

$(document).ready(function(){

     autoPlayModal();

});

</script>

<noscript>不支持javascript浏览器</noscript>

效果不再截图，上面的src引入的是优酷的地址。

四：滚动监听组件

以导航条举列，即根据滚动的位置来自动切换标签页。我们来看下代码。

1：保证出现滚动条。

2：通常给body加data-spy，即使用data-spy="scroll"

<body  data-spy="scroll"  data-target=".navbar"   data-offset="70">

         <div  class="container"  id="myScrollspy">

                  <nav  class="navbar  navbar-default   navbar-fixed-top"   role="navigation">

                                <div  class="container-fluid">

                                            <div  class="collapse  navbar-collapse   js-navbar-scrollyspy"  id="navbar-scroll">

                                                             <ul  class="nav  navbar-nav">

                                                                            <li  class="active"><a  href="#home">home</a></li>

                                                                            <li><a  href="#message">message</a></li>

                                                                             <li><a  href="#about">about</a></li>

                                                                              <li  class="dropdown">

                                                                                       <a  href="#"  class="btn  btn-default  dropdown-toggle"  data-toggle="dropdown">下拉菜单<b  class="caret"></b></a>

                                                                                       <ul  class="dropdown-menu">

                                                                                              <li><a href="#one">one</a>

                                                                                              <li><a href="#two">two</a>

                                                                                              <li><a href="#three">three</a>

                                                                                       </ul>

                                                                              </li>

                                                             </ul>

                                            </div>

                                </div>

                  </nav>

                  <!-- 展示的内容  -->

                  <h1  id="home">home</h1>

                  <p>111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                  </p>

                  <hr>

                    <h1  id="message">message</h1>

                  <p>111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                  </p>

                    <hr>

                    <h1  id="about">about</h1>

                  <p>111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                  </p>

                    <hr>

                    <h1  id="one">one</h1>

                  <p>111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                  </p>

                    <h1  id="two">two</h1>

                  <p>111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                  </p>

                     <h1  id="three">three</h1>

                  <p>111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                        111111111111111111111111111111111111111111111111111111

                  </p>

         </div>

<!--  理解data-offset的意思 -->

理解data-offset的意思：即当滚动位置时，距离顶部的偏移量。其次它的事件处理，与模态框的用法类似，不再讲解。

效果如下：

五：提示框组件

注意：

1：使用data-toggle="tooltip"

2：data-placement表示提示框的方向，共有四个方向，left,right,bottom,top

3：data-animation是将其动画效果设为false,即鼠标移过去后，由原来的渐入渐出变为瞬间出现，没有缓冲效果。

<div  class="container">

        <p  class="muted"> <!-- 缓和 -->

                  this  is  a  test   title,<a  href="#"  id="clickEvent"  data-toggle="tooltip"  title=""  
                data-placement="bottom"  data-original-title="cnblog.com/jtjds"  data-animation="false">click  me,remember

        </p>

</div>

 <!--  <script src="js/jquery-1.11.3.min.js"></script>   本地的加载文件-->

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">

 $('[data-toggle="tooltip"]').tooltip();//初始化

 $('#clickEvent').tooltip('show')  //打开就直接显示

 $('#clickEvent').on('shown.bs.tooltip', function () {

      alert("2222");  //事件处理，显示后将弹出此项

})

 </script>

六：弹出框组件

注意：

1：弹出框即为任意元素添加一小块悬浮层，存放非主要信息。

2：当内容长度为0时，不显示弹出框。使用data-toggle="popover"

3：依赖于提示框插件，且需手动初始化（见javascript里的初始化）

看下下面这段代码，不再截图：

<!--  点击按钮实现弹出，再点击按钮实现隐藏-->

<button  type="button"  class="btn btn-primary"  data-toggle="popover"  title="标题" 
data-content="and  here  is  some  amazing  content,it's  very  engaging,right?">点我弹出/隐藏弹出框</button>

点击button时，出现，再点击button，消失，如果想在空白处点击便可将其隐藏怎么办？

添加data-trigger="focus"即可，隐藏焦点，trigger表示触发的意思。

<!-- 点击按钮弹出，点击任一点空白处隐藏 ，最好使用a标签，当然你也可以使用button-->

<a   tabindex="0" id="myPopover" class="btn  btn-lg  btn-danger"  role="button"  data-toggle="popover"

data-trigger="focus"  title="Dismissible  popover"  data-content="and  this  is  a  beautiful  content">点我可消失</a>

七：警告框组件

注意：

1：使用data-dismiss="alert"

2：次插件可为警告信息添加点击并消失的功能

3：使用关闭按钮时，即close类时，它必须是alert的第一个子元素，且在它之前不许出现文本。

我们来看下代码：

<!--  警告框 -->

<div  class="alert  alert-info  fade  in"  id="myalert">

        <button  type="button"  class="close"  data-dismiss="alert"  aria-label="close">

           <span  aria-hidden="true">&times;</span>

        </button>

        <span>欢迎你</span>

        <button type="button"  class="btn btn-primary">详情</button>

</div>

<div  class="alert  alert-info  fade  in"  id="myalert1">

        <button  type="button"  class="close"  data-dismiss="alert"  aria-label="close">

           <span  aria-hidden="true">&times;</span>

        </button>

        <span>欢迎你</span>

        <button type="button"  class="btn btn-primary">详情</button>

</div>

如果在javascript中存在多个警告框，并且你想将某个警告框关闭时，在javascript里添加下面代码即可，如下：

$("#myalert").alert('close')  //第一个警告框备关闭了，或者将#myalert换成#myalert1时，第二个警告框将关闭

$('#myalert1').on('closed.bs.alert', function () {

     alert("close");  --当点击关闭按钮后，执行alert事件

})

八：按钮组件

注意：

1：切换按钮的状态（禁用还是打开的）--这个用到autocomplete="off"来实现

2：将多个按钮形成工具条等

3：通过设置data-loading-text="loading....."来设置加载的状态

<!-- 按钮 -->

<button  type="button"  id="myButton"  data-loading-text="loading...."  class="btn  btn-primary"  autocomplete="off" >loading  state

</button>

<button  type="button"  class="btn  btn-primary"  data-toggle="button"  aria-pressed="false"  autocomplete="off">single  toggle

</button>

<!-- button组 -->

<div  class="btn-group"  data-toggle="buttons">

          <label  class="btn  btn-primary  active">

                <input  type="checkbox"  autocomplete="off"  checked>home

          </label>

           <label  class="btn  btn-primary  ">

                <input  type="checkbox"  autocomplete="off"  >message

          </label>

           <label  class="btn  btn-primary  ">

                <input  type="checkbox"  autocomplete="off"  >profile

          </label>

</div>

如果希望在点击button后，更改其内容，添加data-complete-text=“xxxx”即可，同时添加javascript代码如下：

<!-- 点击触发后，将内容进行更改data-complete-text表示为完成后的内容 -->

<button  type="button"   class="btn btn-primary  mybtn"  data-complete-text="finish"  autocomplete="off">点击后内容自动更改</button>
<script>
   $('.mybtn').on('click', function () {
        $(this).button('complete') // 内容将变为finish
    })
</script>

设置点击button切换状态，并设置切换状态时的时间，可在javascript里面添加如下代码：

<script>
  $('#myButton').on('click', function (e) {

            var   btn = $(this).button('loading');

            setTimeout(function(e){

                 btn.button('reset');//设置恢复原始状态

           },3000)

  })
</script>

九：折叠框组件

注意：使用data-toggle="collapse" 看下代码：

 <a  class="btn   btn-primary"  role="button"  data-toggle="collapse"  href="#collapseExample"  
             aria-expanded="false" aria-controls="collapseExample">
                Link  with  href
</a>
<div  class="collapse"  id="collapseExample">

        <div  class="well">

                hello ,this  is  test!

        </div>

</div>

另外可结合面板组来进行使用，如下所示：

  <!-- 面板组 -->

         <div  class="panel-group"   id="mypanel"  role="tablist">
                  <!-- 第一个面板  -->

                  <div  class="panel  panel-default">

                               <div  class="panel-heading"  role="tab"  id="headingone">

                                           <h4  class="panel-title">

                                                 <a  data-toggle="collapse"  data-parent="#mypanel"  href="#collapseone"  
                                                     class="btn  btn-primary">home</a>

                                           </h4>

                               </div>

                               <!-- 内容-->

                               <div  id="collapseone"  class="panel-collapse   collapse  in"  role="tabpanel">

                                            <div  class="panel-body">

                                                                关于我

                                                                你好啊

                                                                碎碎念

                                            </div>

                               </div>

                  </div>
                  <!-- 第二个面板 -->

         </div>

通过点击home来控制内容部分，是设置它的href="#collapseone"即内容所对应的id。

关于事件，跟前面使用的类似，这些组件，进行的时间用法都类似，如下

<script type="text/javascript">

       $('#mypanel').on('hidden.bs.collapse', function () {

            alert("2222");

}) 
</script>

十：carsousel滑动组件

注意：使用data-ride="carousel" ,比如像我们通常制作的轮播图等。先看下我制作的轮播图代码：

<div  class="container"  id="myContainer">   ---注意data-target的目标

                <div  id="carousel1"   class="carousel  slide"  data-ride="carousel"  >

                         <ol  class="carousel-indicators">  --indicators表示滑动指示，即从哪一张滑到哪一张

                                    <li  data-target="#carousel1"  data-slide-to="0"  class="active"></li>--从第一张开始滑动

                                    <li  data-target="#carousel1"  data-slide-to="1"></li>

                                    <li  data-target="#carousel1"  data-slide-to="2"></li>

                         </ol>

                           <!-- 呈现内容 -->

                         <div  class="carousel-inner"  role="listbox">

                                     <div  class="item  active">

                                                <img  src="bg.jpeg"  style="width:600px;height:600px;">

                                                <div  class="carousel-caption">     --carousel-caption承载添加的文字等

                                                        <h3>绿色阳光</h3>

                                                        <p>阳光心情，你我同行</p>

                                                </div>

                                     </div>

                                      <div  class="item ">

                                                <img  src="timg.jpg" style="width:600px;height: 600px;">

                                     </div>

                                      <div  class="item ">

                                                <img  src="xx.jpg" style="width:600px;height: 600px;">

                                     </div>

                         </div>

                          <!--  左右两个标签-->

                             <a  class="left  carousel-control"  href="#carousel1"  role="button"  data-slide="pre">

                                      <span  class="glyphicon  glyphicon-chevron-left"  aria-hidden="true"></span>

                                      <span  class="sr-only">previous</span>

                             </a>

                             <a  class="right  carousel-control"  href="#carousel1"  role="button"  data-slide="next">

                                      <span  class="glyphicon  glyphicon-chevron-right"  aria-hidden="true"></span>

                                      <span  class="sr-only">next</span>

                             </a>

                </div>

</div>

效果如下：

关于滑动的快慢，你可以直接在div中添加data-interval="2000" 设置2秒切换，但这种方法出现问题就是

当你刷新浏览器的时候，必须手动的去点一下左右按钮，然后才能实现切换，最好的办法是在javascript里进行设置。如下代码所示

<script type="text/javascript">

       $(".carousel").carousel({

               interval:2000;

       })

 </script>

十一：Affix组件

注意：使用position:fixed进行定位，利用data-spy="affix" 结合data-offset来实现监听，当发生某一事件时，进行偏移。贴码看下列子：

<div  class="container">

          <!-- 栅格系统进行布局 -->

          <div  class="col-md-3">

                    <ul  class="list-group  affixed-element-top  js-affixed-element-top">

                             <li  class="list-group-item">1111111111</li>

                             <li  class="list-group-item">222222222</li>

                             <li  class="list-group-item">3333333333333</li>

                             <li  class="list-group-item">44444444444</li>

                             <li  class="list-group-item">555555555</li>

                             <li  class="list-group-item">6666666666</li>

                             <li  class="list-group-item">777777777777</li>

                    </ul>

          </div>

          <div  class="js-content  col-md-6">

                          <p>1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                          </p>

                            <p>1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                          </p>

                            <p>1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                          </p>

                            <p>1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                          </p>

                            <p>1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                          </p>

                            <p>1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                          </p>

                            <p>1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                                1111111111111111111111111111111111111111111111

                          </p>

          </div>

          <div    class="col-md-3 " >

                       <ul  class="list-group  affixed-element-bottom  js-affixed-element-bottom">

                             <li  class="list-group-item">1111111111</li>

                             <li  class="list-group-item">222222222</li>

                             <li  class="list-group-item">3333333333333</li>

                             <li  class="list-group-item">44444444444</li>

                             <li  class="list-group-item">555555555</li>

                             <li  class="list-group-item">6666666666</li>

                             <li  class="list-group-item">777777777777</li>

                    </ul>

          </div>

</div>

 <!--  <script src="js/jquery-1.11.3.min.js"></script>   本地的加载文件-->

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<script src="js/bootstrap.min.js"></script>

<script type="text/javascript">

   $('.js-affixed-element-top').affix({

          offset:{ }

})

     $('.js-affixed-element-bottom').affix({

          offset:{bottom:200 }---当鼠标滚到最下面时，该div会自动偏移到距离底部200px的地方

})

 </script>

js组件差不多到此结束，学习bootstrap这个框架也差不多结束了，下一篇终结篇，打算自己专门用bootstrap设计一个页面制作出来，跟大家

分享。如果你也正在学习bootstrap框架，欢迎交流学习哈！

作者：向婷风

出处：http://www.cnblogs.com/jtjds/p/5572205.html

如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者

本人同意 转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。

bootstrap学习总结-js组件(四)的更多相关文章

bootstrap学习之二-组件
一.bootstrap字体图标以span的形式出现,通常可以用于一个button或者其他元素的内文本, <span class="glyphicon glyphicon-sort-b ...
bootstrap学习总结-css组件(三)
今天我们来看看css组件效果以及其中比较重要的类,这些类都不难,关键要熟练掌握,搭配使用,灵活运用.关于前两篇中,css样式和布局的文章,大家可以在首页进行阅读.http://www.cnblogs. ...
学习EChart.js（四）移动端显示
ECharts.js 移动端显示现在很多时候,我们是在用手机.pad等一些移动端设备来进行办公获取数据.所以我们的图表很多时候是需要用移动端设置来查看的,而我们的图表有时候因为数据的偏多,会出现遮挡 ...
从零开始学习Node.js例子四多页面实现数学运算续二(client端和server端)
1.server端支持数学运算的服务器,服务器的返回结果用json对象表示. math-server.js //通过监听3000端口使其作为Math Wizard的后台程序 var math = r ...
从零开始学习Node.js例子四多页面实现数学运算续一(使用connect和express框架)
1.使用connect框架 .use方法用于绑定中间件到connect服务器,它会配置一系列在接到请求时调用的中间件模块,此例中我们要配置的中间件有favicon logger static rout ...
从零开始学习Node.js例子四多页面实现数学运算
app-node.js ; var http = require('http'); var htutil = require('./htutil'); var server = http.create ...
bootstrap学习：基本组件以及布局；
1.下拉菜单: <div class="btn-group"> <button type="button" class="btn b ...
JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面
前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

随机推荐

Java生成公私钥对
public static synchronized KeyPair generateRSAKeyPair(int keysize, BigInteger publicExponent) { try ...
Eclipse 出现Some sites could not be found. See the error log for more detail.错误解决方法
Eclipse 出现Some sites could not be found. See the error log for more detail.错误解决方法 Some sites could ...
存放事务码及其描述的TABLE是TSTC、TSTCT。
存放事务码及其描述的TABLE是TSTC.TSTCT.
ABAP--如何在ALV_Grid的函数中定义下拉列表
最近经常听到网友和用户需求希望你在ALV Grid的函数中加入下来列表,其实SAP已经考虑了大家的需求,用户的需求是可以实现的.我特地将代码奉献给大家,供大家参考和学习. 代码如下: REPORT.* ...
换SSD硬盘，重装系统，一阵子忙乱
许久没重装过系统了,低声下气地问老板要了一块SSD硬盘,不马上安装上手痒得难受,但年底这个时候重装系统绝对忙乱,差点耽误了一份申请表和一份培训记录表. SSD安装:先从网上找相关贴子,最主要的一个 ...
【转】Android Studio中通过快捷键来提取提取方法
今天来给大家介绍一个非常有用的Studio Tips,有些时候我们在一个方法内部写了过多的代码,然后想要把一些代码提取出来再放在一个单独的方法里,通常我们的做法是复制粘贴,现在我来教给大家一个非常简洁 ...
Android项目实战（十五）：自定义不可滑动的ListView和GridView
不可滑动的ListView (RecyclweView类似) public class NoScrollListView extends ListView { public NoScrollListV ...
Silverlight项目笔记1:UI控件与布局、MVVM、数据绑定、await/async、Linq查询、WCF RIA Services、序列化、委托与事件
最近从技术支持转到开发岗,做Silverlight部分的开发,用的Prism+MVVM,框架由同事搭好,目前做的主要是功能实现,用到了一些东西,侧重于如何使用,总结如下 1.UI控件与布局常用的主要 ...
在XcodeGhost事件之后，获取更纯净的Xcode的方法。
正值Xcode 7正式版本的更新,IOS界就冒出了个甚至可以说成涉及国家安全的大事也不为过的事件: 也可以点击网址链接看总结的更完整的文章:众多知名 APP 都中毒了,XCodeGhost 病毒事件汇 ...
忙碌的Nova君（活动安排问题、贪心算法）
题目描述理论上,Nova君是个大闲人,但每天还是有一大堆事要干,大作业啦,创新杯啦,游戏啦,出题坑人啦,balabala......然而精力有限,Nova君同一时间只能做一件事,并不能一心二用.假设 ...

bootstrap学习总结-js组件(四)

bootstrap学习总结-js组件(四)的更多相关文章

随机推荐

热门专题