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

玩转Bootstrap(JS插件篇)

  • javascript的单击事件
    查看全部
  • 除了通过data-toggle和data-target来控制模态弹出窗之外,Bootstrap框架针对模态弹出框还提供了其他自定义data-属性,来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop,是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下所示:
    查看全部
  • 添加fade类可以添加过渡效果
    查看全部
  • 众所周知,模态弹出窗在页面加载完成时,是被隐藏在页面中的,只有通过一定的动作(事件)才能触发模态弹出窗的显示。在Bootstrap框架中实现方法有2种,接下来分别来介绍这2种触发模态弹出窗的使用方法。 声明式触发方法: 方法一:模态弹出窗声明,只需要自定义两个必要的属性:data-toggle和data-target(bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle="" 或者 data-dismiss="")。例如: 、data-toggle必须设置为modal(toggle中文翻译过来就是触发器); 2、data-target可以设置为CSS的选择符,也可以设置为模态弹出窗的ID值,一般情况设置为模态弹出窗的ID值,因为ID值是唯一的值。
    查看全部
  • 除此之外,Bootstrap框架还为模态弹出窗提供了不同尺寸,一个是大尺寸样式“modal-lg”,另一个是小尺寸样式“modal-sm”。其结构上稍做调整
    查看全部
  • Bootstrap框架中的模态弹出框,分别运用了“modal”、“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-content”中,其主要又包括三个部分: ☑ 弹出框头部,一般使用“modal-header”表示,主要包括标题和关闭按钮 ☑ 弹出框主体,一般使用“modal-body”表示,弹出框的主要内容 ☑ 弹出框脚部,一般使用“modal-footer”表示,主要放置操作按钮
    查看全部
  • fade
    查看全部
  • $(function(){ $('[data-toggle="tooltip"]').tooltip(); $('#myTooltip').tooltip({ title:"我是一个提示框,我在顶部出现", placement:'top' }); });
    查看全部
  • 将 nav-tabs 换成 nav-pills,另外关键一点是将 data-toggle="tab"换成data-toggle="pill"
    查看全部
  • 在添加 fade 样式时,最初的默认显示的内容面板一定要记得加上 in 类名,不然其内容用户无法看到。
    查看全部
  • 1、选项卡导航链接中要设置 data-toggle="tab" 2、并且设置 data-target="对应内容面板的选择符(一般是ID)"; 如果是链接的话,还可以通过 href="对应内容面板的选择符(一般是ID)" 主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。 3、面板内容统一放在 tab-content 容器中,而且每个内容面板 tab-pane 都需要设置一个独立的选择符(最好是ID)与选项卡中的 data-target 或 href 的值匹配。
    查看全部
  • 提示框--其他的自定义属性
    查看全部
  • 导航条必须设置为顶部固定样式(navbar-fixed-top)。 <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>
    查看全部
  • 第一步:使用滚动监控器,首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js。 第二步:设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接,锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”(id名称可自由定义),方便滚动监控。 第三步:设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy(这个类名可自由定义)的容器中,其中放了多个子内容框。每个子内容框有一个标题,而且每个标题的ID值与导航菜单项中的锚点链接名相对应,并且注意加入“data-target="#navbar-menu"”属性(这个属性值要与前面的nav标签的id名称保持一致) 第四步:为监控对象定义样式,设置容器scrollspy大小(设置高度目的是为了产生垂直滚动条)。
    查看全部
  • 不过使用该参数,每次单击都要两次toggle,就会一直是一个不变的状态。所以,一般情况下,使用示例中不带参数的方法。就算你需要使用参数“toggle”,也建议使用jQuery的one方法
    查看全部

举报

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

微信扫码,参与3人拼团

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

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