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

玩转Bootstrap(JS插件篇)

  • 使用JavaScript调用dropdown()方法后,单击激活按钮,会弹出下拉菜单,再次单击的时候会收起下拉菜单。 $(function(){ $(".dropdown-toggle").dropdown(); }) 还可以使用参数“toggle”。当下拉菜单隐藏时,调用dropdown(“toggle”)方法可以显示下拉菜单,反之,如果下拉菜单显示时,调用dropdown(“toggle”)方法可以让下拉菜单隐藏。 $(function(){ $(".dropdown-toggle").dropdown("toggle"); }) 不过使用该参数,每次单击都要两次toggle,就会一直是一个不变的状态。所以,一般情况下,使用示例中不带参数的方法。就算你需要使用参数“toggle”,也建议使用jQuery的one方法: $(".dropdown-toggle").one("click",function(){ $(this).dropdown("toggle"); })
    查看代码快照
  • 实现下拉菜单原理: Dropdown插件加载时,对所有带 有“data-toggle=dropdown”样式的元素绑定了事件,用户单击带有“data-toggle=dropdown”样式的链接或按钮时, 会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时,下拉菜单的父容器(上面的示例是 “<li class="dropdown">”)会添加一个open类名,此时下拉菜单显示;再次单击时,JavaScript会删除刚添加的open类 名,此时下拉菜单将隐藏。 简单的说,要制作下拉菜单,其结构基本如下: <div class="dropdown"> <a data-toggle="dropdown" href="#">下拉菜单触发器</a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div> 如果触发下拉菜单的元素是一个链接元素,为了避免点击链接,页面跳到顶部,可以使用data-target="#"来替代href="#": <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul> </div>
    查看代码快照
  • 一般下拉菜单都是出现在导航条中
    查看代码快照
  • 和模态弹出窗一样,触发下拉菜单方式有两种,一种是属性声明式用法,另一种是JavaScript方法。
    查看代码快照
  • 对参数设置和事件设置进行介绍。 参数设置: 在Bootstrap框架中还为模态弹出窗提供了三种参数设置,具体
    查看代码快照
  • http://img.mukewang.com/544f0bd50001b34409020384.jpg
    查看代码快照
  • JavaScript触发方法 除了使用自定义属性触发模态弹出框之外,还可以通过JavaScript方法来触发模态弹出窗。通过给一个元素一个事件,来触发。比如说给一个按钮一个单击事件,然后触发模态弹出窗。
    查看代码快照
  • http://img.mukewang.com/544f09480001d6c409000872.jpg<br> 除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop,是否可以按ESC键关闭模态弹出窗。
  • 为模态弹出框增加过度动画效果: 可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。
    查看代码快照
  • 方法一:模态弹出窗声明,只需要自定义两个必要的属性:data-toggle和data-target(bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss="")。例如: <!-- 触发模态弹出窗的元素 --> <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button> <!-- 模态弹出窗 --> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模态弹出窗内容 --> </div> </div> </div> 注意以下事项: 1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器); 2、data-target可以设置为CSS的选择符,也可以设置为模态弹出窗的ID值,一般情况设置为模态弹出窗的ID值,因为ID值是唯一的值。 方法二:触发模态弹出窗也可以是一个链接<a>元素,那么可以使用链接元素自带的href属性替代data-target属性,如: <!-- 触发模态弹出窗的元素 --> <a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a> <!-- 模态弹出窗 --> <div class="modal fade" id="mymodal" > <div class="modal-dialog" > <div class="modal-content" > <!-- 模态弹出窗内容 --> </div> </div> </div> 不过建议还是使用统一使用data-target的方式来触发。
    查看代码快照
  • transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是,这些过渡动画都是采用CSS3来实现的,所以IE6-8浏览器是不具备这些过渡动画效果。 默认情况之下,Bootstrap框架中以下组件使用了过渡动画效果: ☑ 模态弹出窗(Modal)的滑动和渐变效果; ☑ 选项卡(Tab)的渐变效果; ☑ 警告框(Alert)的渐变效果; ☑ 图片轮播(Carousel)的滑动效果。 右侧举了一个“模态弹出窗(Modal)的滑动和渐变效果”源代码例子。
    查看代码快照
  • 自定义Bootstrap框架主要有两种方式来实现: 使用 CSS 预处理器语言 使用在线自定义设置 在线自定义设置主要包括三个部分: Bootstrap 组件 Bootstrap 插件 Bootstrap 的 LESS 版本变量设置
  • <div data-spy="affix" data-offset="90">affix元素</div> 分开设置 data-offset 值方式: <div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>
  • Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定
  • $(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").carousel("next"); }); });

举报

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

微信扫码,参与3人拼团

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

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