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

玩转Bootstrap(JS插件篇)

  • 每个面板的内容区都被隐藏起来了,变成不可视,但有时候希望默认第一个面板内容是可视的,需要怎么办?其实Bootstrap作者早就为大家做了这方面的考虑,你只需要在collapse基础上再追加 in 样式
    查看全部
  • collapse in设置面板初始化状态为展开状态
    查看全部
  • 简单点就是一个触发器和一个折叠区: <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发器</button> <div id="demo" class="collapse in">折叠区</div>
    查看全部
  • 在Bootstrap框架中将这两个部分组合起来称为一个panel页板,如右边效果所示,他就有三个panel面板,将这三个面板组合在一起,就是一个面板组合 panel-group,也就是手风琴的结构。
    查看全部
  • 各部分层级关系:panel-group>>panel|panel|...|panel>>panel-heading(panel-title)|panel-collapse(panel-body)
    查看全部
  • 把“手风琴”看作是面板的集合组:div class="panel-group"
    查看全部
  • 注意,这里自定义属性是 data-toggle="button",而不是 data-toggle="buttons"。
    查看全部
  • 使用 data-toggle 属性还可以激活按钮的行为状态,实现在激活和未激活之间进行状态切换。例如,下面代码可以激活按钮行为特性,单击时将按钮激活,再单击可以让按钮恢复到默认状态: <button type="button" data-toggle="button" class="btn btn-primary">确认</button>
    查看全部
  • 也是通过在按钮组上自定义data-toggle="buttons"来实现。唯一不同的是,将input[type="radio"]换成input[type="checkbox"]
    查看全部
  • 使用这种效果的时候,无需借助JavaScript代码来触发,因为默认Bootstrap就已经为用户初始化好了。
    查看全部
  • <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"); }); }); 【注意】:无法直接通过声明式触发此效果。
    查看全部
  • 关闭按钮不在 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>
    查看全部
  • 点击X会关闭整个警告框。 其实关闭按钮,不一定非要用X号,也可以是普通的按钮元素或者链接元素,只需要保证关闭元素带有自定义属性data-dismiss="alert"即可。
    查看全部
  • 和提示框一样不能直接通过HTML的自定义data属性来触发。需要依赖于JavaScript脚本。 最简单的触发方式如下: 【html代码:】 <button type="button" class="btn btn-default" data-toggle="popover" data-placement="left" title="提示框居左" data-content="我是弹出框的内容"> 猛击我吧 </button> 【js代码:】 $(function(){ $('[data-toggle="popover"]').popover(); });
    查看全部
  • 弹出框除了有标题 title 以外还增加了内容 content 部分。
    查看全部

举报

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

微信扫码,参与3人拼团

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

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