手记

一些BootStrap内置组件笔记分享

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" ></div>
</div> 

  1. 彩色进度条
<div class="progress">
    <div class="progress-bar progress-bar-success/info/warning/danger" ></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" ></div>
</div>

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

5.层叠进度条

  • 正常层叠进度条
<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> 
  • 不良效果层叠进度条
<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>
  • 层叠条纹进度条
<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>  

6.带Label的进度条

  • 进度条1
<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" >20%</div>  
</div>  
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"   >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>

3人推荐
随时随地看视频
慕课网APP

热门评论

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

查看全部评论