一些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>

备注： × 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>