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

玩转Bootstrap(JS插件篇)

  • 片轮播--JavaScript触发方法 默认情况之下,如果 carousel 容器上定义了 data-ride="carousel" 属性,页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性,可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下: $(".carousel").carousel(); 也可以通过容器的 ID 来指定: $("#slidershow").carousel(); 在 carousel() 方法中可以设置具体的参数,如: 属性名称 类型 默认值 描述 interval number 5000 幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环 pause string hover 默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放 wrap 布尔值 true 轮播是否持续循环 使用时,在初始化插件的时候可以传关相关的参数,如: $("#slidershow").carousel({ interval: 3000 }); 实际上,当我们给carousel()方法配置参数之后,轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法,简单说明如下: .carousel("cycle"):从左向右循环播放; .carousel("pause"):停止循环播放; .carousel("number"):循环到指定的帧,下标从0开始,类似数组; .carousel("prev"):返回到上一帧; .carousel("next"):下一帧
    查看全部
  • 图片轮播--声明式触轮播图的播放(二) 除了data-ride="carousel"、data-slide、data-slide-to 以外,轮播组件还支持其他三个自定义属性: 属性名称 类型 默认值 描述 data-interval number 5000 幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环 data-pause string hover 默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放 data-wrap 布尔值 true 轮播是否持续循环 如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。 <div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000"> ...... </div> 上面三个属性可以在容器元素上定义,也可以在标示符(或左右控制链接)上定义,但是后者定义的优先级比较高。
    查看全部
  • 按钮插件--JavaScript用法 除了上面介绍的属性声明使用方法之外,按钮插件还可以通过调用button函数,然后给button函数传入具体的参数,实现不同的效果。而其中有两个参数是固定不变的,即toggle和reset。其他的都可以随意定义: 1、切换按钮状态(得到焦点): $("#mybutton").button("toggle") 2、重新恢复按钮: $("#mybutton").button("reset") 如下代码: $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('reset'); }); }); }); 3、任意参数: $("#mybutton").button("任意字符参数名") 上面代码作用:替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值”。如下代码: html: <button type="button" data-toggle="button" class="btn btn-primary" id="mybutton" data-complete-text="Loading finished" >确认</button> js代码: $(function() { $("#mybutton").click(function(){ $(this).button('loading').delay(1000).queue(function() { $(this).button('complete'); }); }); });
    查看全部
  • 滚动监控器--在body中加监控 除了这种方法之外,还可以直接在body上进行滚动条监控,此时要将滚动监控器移到body上,而且导航nav一定要在body内部。如下所示: <body data-spy="scroll" data-target="#navbar-menu"> <div class="navbar navbar-default navbar-fixed-top" id="navbar-menu"> </div> <h3 id="blog">Blog</h3> <p>…</p> </body> 注意:导航条必须设置为顶部固定样式(navbar-fixed-top)。
    查看全部
  • 滚动监控器--滚动监控器的设计 在Web页面中实现Bootstrap滚动监控器其实非常简单,接下来我们一步一步来看滚动监控器是如何设计的。 第一步:使用滚动监控器,首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js。这里以加载合并好的js为例: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 第二步:设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接,锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”(id名称可自由定义),方便滚动监控。 第三步:设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy(这个类名可自由定义)的容器中,其中放了多个子内容框。每个子内容框有一个标题,而且每个标题的ID值与导航菜单项中的锚点链接名相对应,并且注意加入“data-target="#navbar-menu"”属性(这个属性值要与前面的nav标签的id名称保持一致) 第四步:为监控对象定义样式,设置容器scrollspy大小(设置高度目的是为了产生垂直滚动条)。 .scrollspy{ height:500px; font-size:20px; overflow:auto; }
    查看全部
  • 即不能去掉data-toggle="dropdown"
    查看全部
  • <script> $(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").carousel("next"); }) })
    查看全部
  • <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    查看全部
  • <div class="btn-group"> <label class="btn btn-primary"> <input type="checkbox" name="options" id="options1">电影 </label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="options2">音乐 </label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="options3">游戏 </label> <label class="btn btn-primary"> <input type="checkbox" name="options" id="options4">摄影 </label> </div>
    查看全部
  • <div class="btn-group"> <label class="btn btn-primary"> <input type="radio" name="options" id="options1">男 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="options2">女 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="options3">未知 </label> </div>
    查看全部
  • js控制tooltip <script> $(function(){ $('[data-toggle="tooltip"]').tooltip(); $('#myTooltip2').tooltip({ title:"我是一个提示框,我在顶部出现", placement:'top' }); }); </script>
    查看全部
    0 采集 收起 来源:提示框(Tooltip)

    2018-03-22

  • 注意区分大小写 $(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); })
    查看全部
  • Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮 ☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容 ☑ 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮
    查看全部
  • scrollspy主要spy,定位需要自己精确 http://stackoverflow.com/questions/9288482/how-do-i-set-the-offset-for-scrollspy-in-bootstrap <script> var offset = 50; $('.navbar li a').click(function(event) { event.preventDefault(); $($(this).attr('href'))[0].scrollIntoView(); scrollBy(0, -offset); }); </script>
    查看全部
  • 最后的关闭按钮写在外面,关闭它上面的alert,再点击的话就会关闭它上面的所有alert
    查看全部
代码语言

举报

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

微信扫码,参与3人拼团

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

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