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

玩转Bootstrap(JS插件篇)

  • $(function(){ $("#loaddingBtn").on("click",function(){ $(this).button("loading"); }); }); 等效于 $(function(){ $("#loaddingBtn").click(function(){ $(this).button("loading"); }); });
    查看代码快照
  • Bootstrap中文定制页面:http://v3.bootcss.com/customize/
  • http://v3.bootcss.com/customize/
  • 第11行的data-target 属性 就是这个按钮 的目标对对象。点击这个按钮触发这个目标对象的代表事件,比如显示
  • 如果去掉transition.js文件,淡入淡出的效果就会消失!
  • jquery的库一定要在bootstrap的插件库之前导入。真有这样才能能让bootstrap 运行, 因为插件库就是在jquery的基础上开发出来的!
  • http://img.mukewang.com/5420d99d000191d806890476.jpg
  • 自定义Bootstrap框架主要有两种方式来实现: 使用 CSS 预处理器语言 使用在线自定义设置 1.使用 CSS 预处理器语言 在学习 Bootstrap 框架的使用时,可以看到 Bootstrap 框架中很多组件的 UI 效果都有对应的 LESS 版本和 Sass 版本源码。其实需要自定义 Bootstrap 框架,完全可以在这些组件的 LESS 或 Sass 源码文件上进行修改,然后将修改好的源码重新编译出 bootstrap.css 文件,从而实现适合自己的 UI 界面风格。 使用 CSS 预处理器语言来重新定义 Bootstrap 框架有一个前提条件,那就是开发人员会使用 LESS 或 Sass 预处理器语言,否则要在此基础上实现 Bootstrap 框架自定义不是一件容易的事情。不过大家不用担心,就算你不懂 LESS 或 Sass 也不用怕,可以通过在线自定义设置来实现自定义 Bootstrap 框架。 2.使用在线自定义设置 在Bootstrap框架的官网为大家提供了一个在线自定义 Bootstrap 框架的配置页面 http://getbootstrap.com/customize/ ,可以通过这里进行配置。 在线自定义设置主要包括三个部分: Bootstrap 组件 Bootstrap 插件 Bootstrap 的 LESS 版本变量设置 我们只需要根据自己的需求设置完成之后,点击最底部的下载按钮就可以得到自定义后的 Bootstrap 框架。
  • 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一样。
    查看代码快照
  • Affix 一词不好翻译,根据其效果,我将其译为固定定位。Affix 插件是从 Bootstrap V2.1 版本新增的一个插件,其主要功能就是通过插件给某个元素(需要固定的元素)添加或删除 affix 类名,实现元素在浏览器窗口中固定(元素带有 affix 类名固定)和不固定(元素不带有 affix 类名)的效果。 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定
    查看代码快照
  • 实际上,当我们给carousel()方法配置参数之后,轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法,简单说明如下: .carousel("cycle"):从左向右循环播放; .carousel("pause"):停止循环播放; .carousel("number"):循环到指定的帧,下标从0开始,类似数组; .carousel("prev"):返回到上一帧; .carousel("next"):下一帧 例如,前面的调用方法,向前和向后两个按钮还无法正常工作,其实可以通过 .carousel("prev") 和 .carousel("next") 方法让他们能正常工作,代码如下: $(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").carousel("next"); }); });
    查看代码快照
  • 实际上,当我们给carousel()方法配置参数之后,轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法,简单说明如下: .carousel("cycle"):从左向右循环播放; .carousel("pause"):停止循环播放; .carousel("number"):循环到指定的帧,下标从0开始,类似数组; .carousel("prev"):返回到上一帧; .carousel("next"):下一帧 例如,前面的调用方法,向前和向后两个按钮还无法正常工作,其实可以通过 .carousel("prev") 和 .carousel("next") 方法让他们能正常工作,代码如下: $(function(){ $("#slidershow").carousel({ interval:2000 }); $("#slidershow a.left").click(function(){ $(".carousel").carousel("prev"); }); $("#slidershow a.right").click(function(){ $(".carousel").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>
    查看代码快照

举报

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