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

玩转Bootstrap(JS插件篇)

  • .carousel("cycle"):从左向右循环播放; .carousel("pause"):停止循环播放; .carousel("number"):循环到指定的帧,下标从0开始,类似数组; .carousel("prev"):返回到上一帧; .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>
    查看全部
  • 注意:在这个案例中不加入data-target="#panel1"也可以,因为前面已经有了href="#panel1",但如是button按钮作为触发器就必须使用data-target="#panel1"语句了。
    查看全部
  • 手风琴(Collapse)
    查看全部
  • 按钮插件--JavaScript用法
    查看全部
  • 按钮状态切换 使用 data-toggle 属性还可以激活按钮的行为状态,实现在激活和未激活之间进行状态切换。例如,下面代码可以激活按钮行为特性,单击时将按钮激活,再单击可以让按钮恢复到默认状态: <button type="button" data-toggle="button" class="btn btn-primary">确认</button>
    查看全部
  • 模拟复选按钮
    查看全部
  • 按钮插件--模拟单选择按钮 在Bootstrap框架中按钮插件中,可以通过给按钮组自定义属性data-toggle="buttons",如下所示: <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary"> <input type="radio" name="options" id="options1">男 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="options2">女 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="options3">未知 </label> </div>
    查看全部
  • 按钮加载状态 通过按钮可以设计状态提示,当单击按钮时,会显示loading状态信息。例如,点击“加载”按钮,会触发按钮的加载的状态。如下所示: <button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button> 通过data-loading-text属性定义加载的文本信息,然后通过JavaScript给按钮绑定一个事件,并给按钮添加一个button("loading")方法来激活按钮的加载状态行为。如下所示: $(function(){ $("#loaddingBtn").click(function () { $(this).button("loading"); }); });
    查看全部
  • JavaScript触发警告框 $(function(){ $("#close").on("click",function(){ $(this).alert("close"); }); });
    查看全部
  • 关闭按钮不在 div.alert 容器内时,只要给关闭元素定义了data-target属性(如果是链接元素还可以通过href属性),而且属性值与div.alert容器的id一致,关闭元素放在容器外也可以关闭警告框。来看一个简单的示例: <div class="alert alert-warning" role="alert" id="myAlert"> <h4>谨防被骗</h4> <p>请确认您转账的信息是你的亲朋好友,不要轻意相信不认识的人...</p> </div> <button type="button" data-target="#myAlert" class="btn btn-danger" data-dismiss="alert">关闭</button>
    查看全部
  • 触发警告框,需要在关闭按钮上设置自定义属性data-dismiss="alert"。 其实关闭按钮,不一定非要用X号,也可以是普通的按钮元素或者链接元素,只需要保证关闭元素带有自定义属性data-dismiss="alert"即可。
    查看全部
  • 提示框和弹出框的异同
    查看全部
  • 弹出框--自定义结构属性 http://img1.sycdn.imooc.com//54af444c0001dd6a08600851.jpg
    查看全部
  • 弹出框属性 data-toggle="popover" data-placement="left" 控制方向 title="控制标题" data-content="弹出框内容"
    查看全部

举报

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

微信扫码,参与3人拼团

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

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