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

玩转Bootstrap(基础)

  • <div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" >20%</div> </div>
    查看全部
  • Bootstrap框架除了提供上述几种进度条之外,还提供了一种层叠进度条,层叠进度条,可以将不同状态的进度条放置在一起,按水平方式排列。
    查看全部
  • 在进度条“progress progress-striped”两个类的基础上再加入“active”类名。如下代码: <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" ></div> </div>
    查看全部
  • <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" ></div> </div>
    查看全部
  • 外容器使用“progress”样式,子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式,而progress-bar用于限制进度条的进度。使用方法非常的简单: <div class="progress"> <div class="progress-bar" ></div> </div>
    查看全部
  • 一般是使用两个容器,外容器具有一定的宽度,并且设置一个背景颜色,他的子元素设置一个宽度,比如完成度是30%(也就是父容器的宽度比例值),同时给其设置一个高亮的背景色。
    查看全部
  • <h5>正常层叠进度条</h5> <div class="progress"> <div class="progress-bar progress-bar-success" ></div> <div class="progress-bar progress-bar-info" ></div> <div class="progress-bar progress-bar-warning" ></div> <div class="progress-bar progress-bar-danger" ></div> </div>
    查看全部
    0 采集 收起 来源:进度条

    2018-03-22

  • <div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" ></div> </div>
    查看全部
    0 采集 收起 来源:进度条

    2018-03-22

  • <div class="progress progress-striped"> <div class="progress-bar progress-bar-success" ></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" ></div> </div>
    查看全部
    0 采集 收起 来源:进度条

    2018-03-22

  • <h2>彩色进度条</h2> <div class="progress"> <div class="progress-bar progress-bar-success" ></div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" ></div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" ></div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" ></div> </div>
    查看全部
    0 采集 收起 来源:进度条

    2018-03-22

  • <div class="progress"> <div class="progress-bar" > </div> </div>
    查看全部
    0 采集 收起 来源:进度条

    2018-03-22

  • <div class="alert alert-success" role="alert"> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a> . </div>
    查看全部
  • Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示。
    查看全部
  • <div class="alert alert-success alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">&times;</button> 恭喜您操作成功! </div>
    查看全部
  • 1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。 2、在button标签中加入class="close"类,实现警示框关闭按钮的样式。 3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss="alert"”(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭)。
    查看全部

举报

0/150
提交
取消
课程须知
本教程适合具有一定前端基础的人员,对HTML和CSS有一定的了解,对于定制Bootstrap的同学需要具备LESS和Sass基础知识。
老师告诉你能学到什么?
1、了解Bootstrap框架 2、如何使用Bootstrap制作Web页面或Web应用程序 3、如何定制个性化Bootstrap

微信扫码,参与3人拼团

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

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