When the whole world is about to rain, let's make it clear in our heart together

热爱前端开发,专注于前端

bootstrap-进度条

<!DOCTYPE html>  
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title></title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 条纹类使用progress-bar-striped  -->
<div  class="progress">
           <div   class="progress-bar   progress-bar-success  progress-bar-striped  active"   role="progressbar"  aria-valuenow="40"   aria-valuemin="0"   aria-valuemax="100"   style="width:40%">
                    <span  class="sr-only">40% complete</span>40%
           </div>
</div>
<!--  媒体对象抽象样式,用以构建不同类型的组件,具有在文本内容的左或右侧对齐的图片-->
<div  class="media">
            <div  class="media-left  media-middle">
                     <a  href="#"><img  class="media-object"  src="111.png"></a>
             </div>
             <div  class="media-body">
                     <h4  class="media-heading">Media  heading</h4>
                     <p  class="media-right">this  is  a  titlt   this  ia  a  title  this  is  a  title  ssss   rrr   rrrr gggg  tttt</p>
             </div>
</div>
<!-- media-left和media-right进行布局  -->
<!-- 列表组 -->
<ul  class="list-group">
         <li  class="list-group-item"><span  class="badge">3</span>1111</li>
         <li  class="list-group-item"><span  class="badge">5</span>2222</li>
          <li  class="list-group-item">3333</li>
          <li  class="list-group-item">4444</li>
          <li  class="list-group-item">5555</li>
</ul>
<!--  链接作为列表组 也可添加情景类-->
<div  class="list-group">
         <a  href="#"  class="list-group-item  active">2222</a>
         <a  href="#"  class="list-group-item  disabled">33333</a>
         <a  href="#"  class="list-group-item-success">44444</a>
         <a  href="#"  class="list-group-item-info">55555</a>
</div>
<!-- 按钮作为列表组,使用div,不要用.btn类 -->
<div  class="list-group">
        <button  type="button"  class="list-group-item  list-group-item-warning">1111</button>
        <button  type="button"  class="list-group-item-danger">2222</button>
        <button  type="button"  class="list-group-item-success">3333</button>
        <button  type="button"  class="list-group-item-info">4444</button>
</div>
<!-- 列表组定制内容 -->
<div  class="list-group">
         <a  href="#"  class="list-group-item  active">
                 <h4  class="list-group-item-heading">list  group  item</h4>
                 <p  class="list-group-item-text">11111</p>
         </a>
          <a  href="#"  class="list-group-item  ">
                 <h4  class="list-group-item-heading">list  group  item</h4>
                 <p  class="list-group-item-text">22222</p>
         </a>
</div>
<!-- 面板 panel-->
<div  class="panel  panel-default">
            <div  class="panel-body">
              Basic  panel  example
            </div>
</div>
<!-- 带标题的面板panel-body和panel-heading -->
<div  class="panel  panel-primary">
         <div  class="panel-heading">panel  heading  without  title</div>
         <div  class="panel-body">
               panel  content
          </div>
</div>
<!-- 带脚注的面板 -->
<div  class="panel  panel-primary">
         <div  class="panel-body">
                  panel  content
         </div>
         <div  class="panel-footer">panel  footer</div>
</div>

<!-- 为表格添加面板边框 -->
<div  class="panel  panel-default">
              <div  class="panel-heading">panel  heading</div>
              <div  class="panel-body">
                        <p>22222222</p>
              </div>
              <table  class="table  table-bordered  table-hover  table-condensed  table-striped">
                            <thead>
                                    <tr>
                                              <th>#</th>
                                              <th>First  Name</th>
                                              <th>Last  Name</th>
                                    </tr>
                            </thead>
                            <tbody>
                                       <tr>
                                              <td>111</td>
                                              <th>xx</th>
                                              <th>yy</th>
                                    </tr>
                            </tbody>
              </table>

</div>

<!-- 响应式判断文件存在与否 -->
<div class="embed-responsive embed-responsive-16by9">
         <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 带有嵌入的效果 -->
<div  class="well  well-sm">12121211111111111</div>
</body>
</html>

 

posted @ 2016-06-05 17:29  婷风  阅读(144)  评论(0编辑  收藏  举报