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

玩转Bootstrap(JS插件篇)

  • 监控对象是包含详细内容的div,不是导航条 data-target指向对应的导航条 需要注意要设置position:relative;才可以看到效果
    查看全部
  • 运用javascript设置modal更多属性: $(".btn").click(function(){ $("#modalId").modal({ backdrop: "static",//static不是boolean型是个字符串需要加引号 keyboard: false }); });
    查看全部
  • 除了之前data-toggle="modal"加data-target="#ID"方式和a标签的data-toggle="toggle"加href="#ID"方式外还有js触发模态窗的方式:<br> 直接用$(".btn").click(function(){$("#modalId").modal()});
    查看全部
  • 不错
    查看全部
  • $('#myModal').modal() // 以默认值初始化
    查看全部
  • $(function(){ $("#loaddingBtn").on("click",function(){ $(this).button("loading"); }); }); 等效于 $(function(){ $("#loaddingBtn").click(function(){ $(this).button("loading"); }); });
    查看全部
  • Bootstrap中文定制页面:http://v3.bootcss.com/customize/
    查看全部
    0 采集 收起 来源:自定义Bootstrap

    2016-05-03

  • http://v3.bootcss.com/customize/
    查看全部
    0 采集 收起 来源:自定义Bootstrap

    2016-05-03

  • 第11行的data-target 属性 就是这个按钮 的目标对对象。点击这个按钮触发这个目标对象的代表事件,比如显示
    查看全部
  • 如果去掉transition.js文件,淡入淡出的效果就会消失!
    查看全部
  • jquery的库一定要在bootstrap的插件库之前导入。真有这样才能能让bootstrap 运行, 因为插件库就是在jquery的基础上开发出来的!
    查看全部
  • http://img1.sycdn.imooc.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 框架。
    查看全部
    0 采集 收起 来源:自定义Bootstrap

    2016-04-27

  • 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 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定
    查看全部

举报

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

微信扫码,参与3人拼团

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

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