继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

一些BootStrap内置组件笔记分享

不喜甜食
关注TA
已关注
手记 1
粉丝 0
获赞 11
BootStrap内置组件分享笔记

一、警示框

  1. 默认警示框
<div class="alert alert-success" role="alert">恭喜您操作成功!</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">您已操作失败两次,还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起,您输入的密码有</div> 

图片描述

  1. 可关闭的警示框
    此处只列举一个 其他几种颜色替换即可
    success/info/warning/danger 对应四种颜色
    绿色/蓝色/黄色/红色
<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    恭喜您操作成功!
</div>

图片描述

  1. 警示框的链接
<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>

图片描述
备注: &times; html × 的实体


二、进度条

  1. 基本进度条
<div class="progress">
     <div class="progress-bar" style="width:40%"></div>
</div> 

图片描述

  1. 彩色进度条
<div class="progress">
    <div class="progress-bar progress-bar-success/info/warning/danger" style="width:40%"></div>
</div> 

图片描述

3.条纹进度条

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%></div>
</div>

图片描述

4.动态条纹进度条

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%"></div>
</div>

图片描述

备注:“progress-striped”和“active”必须同时运用

5.层叠进度条

  • 正常层叠进度条
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:10%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div> 
  • 不良效果层叠进度条
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:40%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:45%"></div>
</div>
  • 层叠条纹进度条
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:20%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>  

图片描述

6.带Label的进度条

  • 进度条1
<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>  
</div>  
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"   style="width:70%">70%</div>
</div>
  • 进度条2
div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>

图片描述

打开App,阅读手记
3人推荐
发表评论
随时随地看视频慕课网APP

热门评论

呦 不错哦!!!!!!!!!!!!!

查看全部评论