bootstrap小笔记 各种组件(轮播图/模态框/菜单监听....)

Bootstrap----部分组件类名的应用

页头:  page-header

巨幕: jumbotron  ( 展示一个网页关键区域)

缩略图: thumbnail(极小的)  (可以做出九宫格的效果) 
    部分代码:<!-- 尽量不要给img设置属性 可以套一个div -->
                        <div class="thumbnail">
                                <img src="jinmu.jpg" alt="" width="300">
                        </div>

警告-弹框 : alert(提示 通知)
        </div><div class="alert alert-warning">
            禁止访问
            <!-- close 布局 给警告框设置了一个关闭的按钮将警告框关闭 -->
            <button class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>

内嵌 : well

进度条 : progress  

   该例子添加了条纹,动画,堆叠等效果

 <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 60%;"> 60%</div>
        <div class="progress-bar progress-bar-danger" style="width: 30%;">30%</div>
        <div class="progress-bar progress-bar-warning" style="width: 10%;">10%</div>
 </div>

媒体对象 : media

                 media-left     右边有margin   

                 medio-body  媒体展示部分(包括media-heading.....media-bottom)

                 media-right   左边有margin
                 内容在左还是右边 需要自己的代码逻辑

媒体对象列表 : media-list

<div class="media-list">
        <div class="media">
            <div class="media-body">
                <div class="media">
                </div>
            </div>
        </div>
 </div>

列表 : list-group   (列表内部可以是 <li>  , <buttom> , <a>....)

         list-group-item 列表内部的每一项 

          list-group-item-heading  头 和列表有一定距离

面板 : panel    (使用流程如下代码)

        <div class="panel panel-default">
        <!-- 标题 -->
        <div class="panel-heading"></div>
        <div class="panel-body"></div>
        <!-- 脚 -->
        <div class="panel-footer"> </div>
        </div>

模态框 : modal

         过程 : 1.声明模态 modal   类名show显示   类名fade 会有动画  (默认不显示)

                    2.声明窗口 modal-dialog 设置窗口大小

                    3.声明内容 modal-content 分为3部分  分别是 :  头modal-header  主体modal-body  脚modal-footer

                    若不设置类名show,可以在模态框外部自定义一个按钮,在javascript中调用下列函数将两者联系起来

                    $('#btn').on('click',function(){
                          //模态弹出调用modal  参数toggle  show  hidden
                          $('#box').modal();
                     });

         modal的相关事件:
               弹出前  show.bs.modal     例如 :  $('#box').on('show.bs.modal',function () {alert('出现前'); })
               弹出后  shown.bs.modal 指的是有动画 动画执行完

               即将隐藏 hide.bs.modal
               隐藏后   hidden.bs.modal

下拉菜单的滚动监听:

                下拉菜单:

               html中的  data-toggle="dropdown"    <===>   js中的  $('#btn').dropdown();

                内容滑动 <==> nav data-spy="scroll"(滑动)   (设置在内容区)

                                         data-offset="100"(范围)        滑动与之对应的标题会高亮

                                         data.target='#id' <==> href='#id'

                以上代码也可以用javascript 中的代码表示 :   两种代码是等价的
                             $('#content').scrollspy({
                                     offset:100
                             })

导航菜单 :

              放置对应内容的设置div class="tab-content"
              每一个导航项对相应的内容 设置 class="tab-pane"

             在 js 为菜单项添加点击事件实现菜单导航

                     $('#nav a').on('click',function(){
                            $(this).tab('show');
                     })

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

          放置单选框/多选框     可以实现类似这样的按钮效果

         

          </div>

按钮按下改变文本内容:

         <button class="btn btn-success" data-loading-text="下载">按钮</button>
         <button class="btn btn-danger">按钮</button>

        <script>
        //.button('loading') 改变文本为data-loading-text的值  若没有值,那么改变文本为loading
        //.button('reset')  回到原来的值
        $('button').on('click',function(){
            var that = $(this).button('loading');
            setTimeout(function(){
                that.button('reset');
            },2000)
        })
        </script>

          效果  :     按下前 :     按下后 :  

弹出框提示 : popover
       银行账号:<input type="text" data-toggle="popover"
                                                data-content="我的妈呀,好多钱啊">
                   <button data-toggle="popover" data-content="你是不是傻">确定</button>
        <script>
              $('input').popover();
              $('button').popover();
       </script>

折叠菜单 : collapse
       1.按钮  data-toggle="collapse" data-target="#content"
       2.内容  class="collapse"

轮播图效果 :

                    包括三个部分 : 圈圈   轮播图  左右箭头

          类名(样式):
                 最外层 carousel
                 圈圈 carousel-indicators     (ul-li)
                 第0个圈 active
                 图片  carousel-inner
                 每个图 item
                 第0个图 active
                 左右箭头 class="carousel-control left/right"
         属性:
                最外层 data-ride='carousel'   自动轮播 默认5000    默认循环    默认鼠标暂停
               每个圈:data-target  哪个轮播图 data-slide-to
               左右箭头 data-slide="prev/next"

        <script>
              //修改carousel 的默认值
              $('#our').carousel({
                     interval : 1000,
                     pause : 'hover',
                     wrap : true
              })    

        </script>