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

玩转Bootstrap(JS插件篇)

  • 滚动监控器 插件源文件:scrollspy.js,该插件可以自动检测滚动条到达哪个位置,然后在需要高亮的菜单元素上加了一个“active”样式 1、当用户鼠标滚动时,滚动条的位置会自动更新导航条中相应的导航项。 2、用户拖动滚动条,当滚动到@mdo时,上面的@mdo导航项就会高亮显示:
    查看全部
    0 采集 收起 来源:滚动监控器

    2015-04-29

  • 下拉菜单--JavaScript触发方法 使用JavaScript调用dropdown()方法后,单击激活按钮,会弹出下拉菜单,再次单击的时候会收起下拉菜单。还可以使用参数“toggle”。不过使用该参数,每次单击都要两次toggle,就会一直是一个不变的状态。 如果需要使用参数“toggle”,也建议使用jQuery的one方法: $(".dropdown-toggle").one("click",function(){ $(this).dropdown("toggle"); })
    查看全部
  • 下拉菜单--属性声明式方法: 被点击的菜单项链接或按钮需要添加自定义属性 data-toggle="dropdown" 实现下拉菜单原理: Dropdown插件加载时,对所有带 有“data-toggle=dropdown”样式的元素绑定了事件,用户单击带有“data-toggle=dropdown”样式的链接或按钮时, 会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时,下拉菜单的父容器(上面的示例是 “<li class="dropdown">”)会添加一个open类名,此时下拉菜单显示;再次单击时,JavaScript会删除刚添加的open类 名,此时下拉菜单将隐藏。
    查看全部
  • <!--代码任务部分--> <ul class="nav nav-pills"> <li><a href="##">教程</a></li> <li class="active"><a href="##">前端论坛</a></li> <li><a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutoria2">关于我们<b class="caret"></b></a> <ul class="dropdown-menu" role="menu" aria-labelledby="tutoria2"> <li role="presentation"><a href="##">CSS3</a></li> <li role="presentation"><a href="##">HTML5</a></li> <li role="presentation"><a href="##">Sass</a></li> </ul> </li> </ul>
    查看全部
  • <div id="viewPort-header" class="result-triggers"> <a href="javascript:;" id="js-toggle-width" class="result-toggle result-toggle-width" ><i></i><span>全屏</span></a> <a href="javascript:;" id="js-toggle-vsb" class="result-toggle result-toggle-vsb" ><i></i><span>运行结果</span></a> </div>
    查看全部
  • toggle $(“#mymodal”).modal(“toggle”) 触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,则关闭;反之,如果模态弹出窗是关闭的,则显示
    查看全部
  • <script> $(function(){ $(".btn").click(function(){ $("#mymodal").modal({ // show:true, keyboard:true // backdrop:'static' }); }); }); </script>
    查看全部
  • 设计轮播图片计数器。在容器 div.carousel 的内部添加轮播图片计算器,采用 carousel-indicators 样式,其主要功能是显示当前图片的播放顺序(有几张图片就放置几个li),一般采用有顺列表来制作: <div id="slidershow" class="carousel"> <!-- 设置图片轮播的顺序 --> <ol class="carousel-indicators"> <li class="active">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> ... </ol> </div>
    查看全部
  • 个面板的内容区都被隐藏起来了,变成不可视,但有时候希望默认第一个面板内容是可视的,需要怎么办?其实Bootstrap作者早就为大家做了这方面的考虑,你只需要在collapse基础上再追加 in 样式
    查看全部
  • data-toggle="collapse" data-target="#demo"
    查看全部
  • 简单点就是一个触发器和一个折叠区: <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button> <div id="demo" class="collapse in">折叠区</div>
    查看全部
  • collapse in设置面板初始化状态为展开状态
    查看全部
  • 手风琴最关键的部分,就是每个标题对应有一个内容,在Bootstrap框架中将这两个部分组合起来称为一个panel页板,如右边效果所示,他就有三个panel面板,将这三个面板组合在一起,就是一个面板组合 panel-group,也就是手风琴的结构。
    查看全部
  • 各部分层级关系:panel-group>>panel|panel|...|panel>>panel-heading(panel-title)|panel-collapse(panel-body)
    查看全部
  • 把“手风琴”看作是面板的集合组:div class="panel-group"
    查看全部

举报

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

微信扫码,参与3人拼团

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

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