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

玩转Bootstrap(JS插件篇)

  • 为监控对象设置被监控的data属性:data-spy="scroll",指定监控的导航条:data-target="#navbar-menu"。同时定义监控过程中滚动条偏移位置data-offset="60"。 如果导航里有下拉菜单,并且滚动区域的内容到达下拉菜单子项所对应的区域,除了菜单高亮以外,子菜单的父元素dropdown也会高亮 【通过data-offset完美解决滚动监控效果同步问题】: 通过调节监控过程中滚动条偏移位置data-offset=""至合适的值可以使锚点出现时间和导航中对应表项激活状态时间一致!
    查看全部
  • 《position属性absolute与relative 详解》:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html 【position属性:absolute(绝对位置)与relative(相对位置)】 absolute:参照浏览器的左上角,配合TRBL进行定位,在没有设定TRBL,默认依据父级的做标原始点为原 始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。 absolute:参照父级的原始点为原始点,若没有父级则以body的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位。 注:TRBL:Top、Right、Bottom、Left
    查看全部
  • .scrollspy-example的高度会影响效果: 过大,会导致滚动时出现“跳跃”。 问:【滚动监视器在窗口的位置会不会影响效果?】
    查看全部
    1 采集 收起 来源:滚动监控器

    2015-03-25

  • Hint.css 同样可以提示 纯css
    查看全部
  • 右侧代码只是实现了【锚点跳转功能】,但没有实现【滚动监控器】功能,补充右侧编辑器缺少的代码以实现滚动监控器的功能。
    查看全部
  • 多种可能有效的写法(“可能有效”:因为结果一样,但怎么写都隐藏不了) 【1】 $(function(){ $("#tutorial").click(function(){ $(".dropdown-menu").dropdown("toggle"); }); }); 【2】 $(function(){ $(".dropdown-toggle").one("click",function(){ $(this).dropdown("toggle"); }) })
    查看全部
  • 和模态弹出窗一样,Bootstrap框架中的下拉菜单也支持JavaScript方法触发下拉菜单显示。使用JavaScript触发下拉菜单和声明式原理是基本类似的,【不同的是】使用JavaScript方法可以按照自己的方式省略一些元素或者样式。
    查看全部
  • <script> $(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); $('#mymodal').on('hidden.bs.modal', function(e){ // 处理代码... alert("hello,windows!"); //关闭模态弹出窗时,弹出警示框 }); }); </script>
    查看全部
  • 事件设置: 模态弹出窗还支持四种类型的事件,分别是模态弹出窗的弹出前、弹出后,关闭前、关闭后,具体描述如下: 事件类型+描述: show.bs.modal 在show方法调用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件的relatedTarget属性 shown.bs.modal 该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发;如果单击了一个元素,那么该元素将作为事件的relatedTarget事件 hide.bs.modal 在hide方法调用时(但还未关闭隐藏)立即触发 hidden.bs.modal 该事件在模态弹出窗完全隐藏之后(并且CSS动画漂完成之后)触发
    查看全部
  • 参数设置: 在Bootstrap框架中还为模态弹出窗提供了三种参数设置,具体说明如下: 参数 使用方法 描述 toggle $(“#mymodal”).modal(“toggle”) 触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,则关闭;反之,如果模态弹出窗是关闭的,则显示 show $(“#mymodal”).modal(“show”) 触发时,显示模态弹出窗 hide $(“#mymodal”).modal(“hide”) 触发时,关闭模态弹出窗
    查看全部
  • <script> $(function(){ $(".btn").click(function(){ $("#mymodal").modal({ show:true,keyboard:false,backdrop:false }); }); }); </script>
    查看全部
  • $在JS中本身只是一个符号而异,在JS里什么也不是。 但在JS应用库JQUERY的作者将之做为一个自定义函数名了,这个函数是获取指定网页元素的函数,使用非常之频繁,所以好多新手不知道,还以为$是JS的什么特殊语法。 后来,可能有些程序员JQUERY用得多了,发现$这个函数很好用,很方便,所以,在不用JQUERY的情况,一般自己也会自定义一个$函数。 即: function $(Nid){ return document.getElementById(Nid); } 就这么简单(在JSQUERY里可能稍微功能再强大一点,但主要还是我写的这个功能。) 以后在网页就不用每次使用document.getElementById("ID名")来获取元素,只用$('ID名')即可,非常简使了。
    查看全部
  • 单独导入: 为方便单独导入特效文件,Bootstrap V3.2中提供了12种JavaScript插件,他们分别是: ☑ 动画过渡(Transitions):对应的插件文件“transition.js” ☑ 模态弹窗(Modal):对应的插件文件“modal.js” ☑ 下拉菜单(Dropdown):对应的插件文件“dropdown.js” ☑ 滚动侦测(Scrollspy):对应的插件文件“scrollspy.js” ☑ 选项卡(Tab):对应的插件文件“tab.js” ☑ 提示框(Tooltips):对应的插件文件“tooltop.js” ☑ 弹出框(Popover):对应的插件文件“popover.js” ☑ 警告框(Alert):对应的插件文件“alert.js” ☑ 按钮(Buttons):对应的插件文件“button.js” ☑ 折叠/手风琴(Collapse):对应的插件文件“collapse.js” ☑ 图片轮播Carousel:对应的插件文件“carousel.js” ☑ 自动定位浮标Affix:对应的插件文件“affix.js” 上述单独插件的下载可到github去下载(https://github.com/twbs/bootstrap)。
    查看全部
  • perfect
    查看全部
  • 加入JavaScript控件
    查看全部

举报

0/150
提交
取消
课程须知
本课程适合具有一定前端基础的人员,对HTML和CSS有一定的了解,对于定制Bootstrap的同学需要具备LESS和Sass基础知识。
老师告诉你能学到什么?
1、使用JS自由控制Bootstrap中提供的组件。

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!