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

玩转Bootstrap(JS插件篇)

  • boostrop
    查看全部
  • li 中药设置 data-toggle="tab"
    查看全部
  • 查看全部
  • 其实关闭按钮,不一定非要用X号,也可以是普通的按钮元素或者链接元素,只需要保证关闭元素带有自定义属性data-dismiss="alert" 操作关闭按钮时都是先查找 data-target 属性,再查找 href 属性,如果关闭按钮都没有定义这两个属性,就会操作其父元素。也就是说,关闭按钮不在 div.alert 容器内时,只要给关闭元素定义了data-target属性(如果是链接元素还可以通过href属性),而且属性值与div.alert容器的id一致,关闭元素放在容器外也可以关闭警告框。
    查看全部
  • data-parent需要所有子panel都有才有效果
    查看全部
  • 监控对象是包含详细内容的div,不是导航条 data-target指向对应的导航条 需要注意要设置position:relative;才可以看到效果
    查看全部
  • remote的请求页面不知为何无法显示 backdrop:'static'----要加引号
    查看全部
  • 提示框--其他的自定义属性 除此之外,提示框还有其他的自定义属性,每个自定义属性都具自身存在的意义,如下表所示:
    查看全部
  • 提示框--JS触发提示框方法 Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。 最简单的触发方式如下: $(function(){ $('[data-toggle="tooltip"]').tooltip(); }); 除此之外,也可以单独指定一个元素,在该元素上调用提示框,并且可能通过JavaScript的各种参数来实现,无需定义一些 data 属性,如: $(function(){ $('#myTooltip').tooltip({ title:"我是一个提示框,我在顶部出现", placement:'top' }); });
    查看全部
  • 选项卡--JavaScript触发方法 除了在HTML设置 data-toggle 来触发选项卡之外,还可以通过JavaScript直接调用。 调用方法: 在每个链接的单击事件中调用tab("show")方法,显示对应的标签面板内容。针对上面的示例,删除HTML中自定义的 data-toggle="tab" 或 data-toggle="pill" 的属性,然后通过下面的脚本来调用: $(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); }); })
    查看全部
  • 选项卡--胶囊式选项卡(nav-pills) 在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外,还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills,另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。
    查看全部
  • 选项卡--为选择卡添加fade样式 为了让面板的隐藏与显示在切换的过程效果更流畅,可以在面板中添加类名 fade,让其产生渐入的效果。 在添加 fade 样式时,最初的默认显示的内容面板一定要记得加上 in 类名,不然其内容用户无法看到。如下面的示例所示。
    查看全部
  • 1、选项卡导航链接中要设置 data-toggle="tab" 2、并且设置 data-target="对应内容面板的选择符(一般是ID)"; 如果是链接的话,还可以通过 href="对应内容面板的选择符(一般是ID)" 主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。 3、面板内容统一放在 tab-content 容器中,而且每个内容面板 tab-pane 都需要设置一个独立的选择符(最好是ID)与选项卡中的 data-target 或 href 的值匹配。
    查看全部
  • 滚动监控器--在body中加监控
    查看全部
  • 滚动监控器--滚动监控器的设计
    查看全部

举报

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

微信扫码,参与3人拼团

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

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