为了账号安全,请及时绑定邮箱和手机立即绑定

玩转Bootstrap(JS插件篇)

  • data-offset-top=125 当页面向上滚动超过125时 ul则不会跟着页面继续滚动。

    nav-tabs.affix {top:30px}  则是定义ul的页面位置。

    前者是设置滚动距离,后者是页面top距离


  • 模态弹出框(Modals)

    <!-- 按钮触发模态框 -->

    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>

    • data-toggle="modal",HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

    • data-target="#myModal",您想要在页面上加载的模态框的目标

      <!-- 模态框(Modal) -->

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

    • modal fade 当模态框被切换时,它会引起内容淡入淡出。

    • aria-labelledby="myModalLabel",该属性引用模态框的标题。

    • aria-hidden="true" 用于保持模态窗口不可见,直到触发器被触发为止(比如点击在相关的按钮上)。

       <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> 

    • data-dismiss="modal",是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

    • class="close",close 是一个 CSS class,用于为模态窗口的关闭按钮设置样式。

               <h4 class="modal-title" id="myModalLabel">模态框(Modal)标题</h4>         

       </div>        

        <div class="modal-body">在这里添加一些文本</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>


  • Affix 插件可以对任何元素进行固定定位,其中比较简单的方法,就是通过自定义属性 data 来触发。其主要包括两个参数:<br> <br> 1、data-spy:取值 affix,表示元素固定不变的。<br> <br> 2、data-offset:整数值,比如 90,表示元素 top 和 bottom 的值都是 90px,其包括两种方式:data-offset-top 和 data-offset-bottom。<br> <br> data-offset-top 用来设置元素距离顶部的距离。比如 90,表示元素距离顶部 90px,当用户从顶部向下拖动滚动条,当滚动的距离大于 90px 时,affix 元素不再滚动,就会固定在浏览器窗口顶部。<br> data-offset-bottom 刚好与 data-offset-top 相反。<br> 具体使用如下:<br> <br> <div data-spy="affix" data-offset="90">affix元素</div><br> 分开设置 data-offset 值方式:<br> <br> <div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div> 请在宽屏模式下查看效果。据我测试下来,使用声明式,就算设置了 data-offset-top 的值也会失效,需要在样式中给 affix 设置一个top值,与 data-offset-top 值相等。data-offset-bottom一样。

  • 按钮状态切换 使用 data-toggle 属性还可以激活按钮的行为状态,实现在激活和未激活之间进行状态切换。例如,下面代码可以激活按钮行为特性,单击时将按钮激活,再单击可以让按钮恢复到默认状态: <button type="button" data-toggle="button" class="btn btn-primary">确认</button>

  • 使用按钮组来模拟复选按钮和模拟单选按钮是一样的,具有同等效果,也是通过在按钮组上自定义data-toggle="buttons"来实现。唯一不同的是,将input[type="radio"]换成input[type="checkbox"]

  • 模拟单选择按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组,能够让设计更具个性化,可以定制出更美观的单选按钮组。

    可以通过按钮组自定义属性"data-toggle="buttons">,如下代码:

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

            <label for="male" class="btn btn-primary">

                <input type="radio" name="options" id="male">男

            </label>

            <label for="female" class="btn btn-primary">

                <input type="radio" name="options" id="female">女

            </label>

            <label for="unknow" class="btn btn-primary">

                <input type="radio" name="options" id="unknow">未知

            </label>

            

        </div>


  • JavaScript触发警告框 $(function(){    $("#close").on("click",function(){        $(this).alert("close");    }); });

  • 关闭按钮不在 div.alert 容器内时,只要给关闭元素定义了data-target属性(如果是链接元素还可以通过href属性),而且属性值与div.alert容器的id一致,关闭元素放在容器外也可以关闭警告框。来看一个简单的示例: <div class="alert alert-warning" role="alert" id="myAlert">    <h4>谨防被骗</h4>    <p>请确认您转账的信息是你的亲朋好友,不要轻意相信不认识的人...</p> </div> <button type="button" data-target="#myAlert" class="btn btn-danger" data-dismiss="alert">关闭</button>

  • 触发警告框,需要在关闭按钮上设置自定义属性data-dismiss="alert"。

  • 从之前的学习可知,弹出框中HTML自定义的 data 属性和提示框中的自定义的 data 属性基本相同,只不过在其基础上增加了一个 data-content 属性,用来设置弹出框的内容。其实两插件也有略微的不同: 提示框 tooltip 的默认触发事件是 hover 和 focus,而弹出框 popover 是 click 提示框 tooltip 只有一个内容(title),而弹出框不仅可以设置标题(title)还可以设置内容(content) 两个插件的显示模板不同: 提示框tooltip的模板: <div class="tooltip" role="tooltip">    <div class="tooltip-arrow"></div>    <div class="tooltip-inner"></div> </div> 弹出框popover的模板: <div class="popover" role="tooltip">    <div class="arrow"></div>    <h3 class="popover-title"></h3>    <div class="popover-content"></div> </div>

  • Bootstrap框架中触发弹出框和提示框一样不能直接通过HTML的自定义data属性来触发。需要依赖于JavaScript脚本。 最简单的触发方式如下: html代码: <button type="button"        class="btn btn-default"        data-toggle="popover"        data-placement="left"        title="提示框居左"        data-content="我是弹出框的内容">        猛击我吧 </button> js代码: $(function(){    $('[data-toggle="popover"]').popover(); }); 注意:上面这种方法注意要使用 data- 设置弹出框的属性。 使用JS设置参数: html代码: <button type="button"          class="btn btn-default"          id="myPopover">          猛击我吧 </button> 除此之外,也可以单独指定一个元素,在该元素上调用提示框,并且可能通过JavaScript的各种参数来实现,无需定义一些data属性,如: $(function(){    $('#myPopover').popover({        title:"我是弹出框的标题",        content:"我是弹出框的内容",        placement:"top"    }); })

  • 弹出框(Popover)仅从外表上看,和前面介绍的提示框(Tooltip)长得差不多, 不同的是:弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。 <script> $(function(){  $('#myPopover').popover({     title:"我是弹出框的标题",     content:"我是弹出框的内容",     placement:"right"  }); }); </script>

  • Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。其代码如下:

    <a class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="我是一个提示框,我在顶部出现">我是提示框1</a>

    <script>

            $(function(){

                $('[data-toggle]').tooltip();

            })

        </script>



  • <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

举报

0/150
提交
取消
课程须知
本课程适合具有一定前端基础的人员,对HTML和CSS有一定的了解,对于定制Bootstrap的同学需要具备LESS和Sass基础知识。
老师告诉你能学到什么?
1、使用JS自由控制Bootstrap中提供的组件。
意见反馈 邀请有奖 帮助中心 APP下载
官方微信