首页 > 代码库 > bootstrap学习11-进度条媒体对象和well组件

bootstrap学习11-进度条媒体对象和well组件

2024-09-04 00:55:12   223人阅读

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <title>进度条媒体对象和well组件</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body style="margin:100px;">
<!--well组件-->
<div class="well well-lg">
    bootstrap
</div>
<!--进度条组件-->
<div class="progress">
    <div class="progress-bar"  style="width: 60%;" >60%</div>
</div>
<!--最低值进度条组件-->
<div class="progress">
    <div class="progress-bar"  style="min-width: 20px; width:0%" >0%</div>
</div>
<!--结合情景进度条组件-->
<div class="progress">
    <div class="progress-bar progress-bar-success "  style="min-width: 20px; width:60%" >0%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger"  style="min-width: 20px; width:60%" >0%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info"  style="min-width: 20px; width:60%" >0%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning"  style="min-width: 20px; width:60%" >0%</div>
</div>
<!--条纹进度条组件-->
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped"  style="min-width: 20px; width:60%" >0%</div>
</div>
<!--动画进度条组件 必须是条纹线才有动画效果-->
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped active"  style="min-width: 20px; width:60%" >0%</div>
</div>
<!--动画进度条组件 必须是条纹线才有动画效果-->
<div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped active"  style="min-width: 20px; width:20%" >20%</div>
    <div class="progress-bar progress-bar-warning progress-bar-striped active"  style="min-width: 20px; width:30%" >30%</div>
</div>


<!--
    媒体对象组件：主要包括图片 视频 音频
-->

<div class="media">
    <div class="media-left media-center">
        <img  src="img\0.png" alt="图片" class="media-object">
    </div>
    <div class="media-body">
        <h4 class="media-heading">内容</h4>
        <p>金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯</p>
    </div>
</div>

<!--
    媒体对象列表：主要针对于回帖发帖 
-->
<ul class="media-list">
<li class="media">
    
    <div class="media-left media-center">
        <img  src="img\0.png" alt="图片" class="media-object">
    </div>
    <div class="media-body">
        <h4 class="media-heading">内容</h4>
        <p>金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯</p>
    <div class="media">
        <div class="media-left media-center">
            <img  src="img\0.png" alt="图片" class="media-object">
        </div>
        <div class="media-body">
            <h4 class="media-heading">内容</h4>
            <p>金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯</p>
            <div class="media">
                <div class="media-left media-center">
                    <img  src="img\0.png" alt="图片" class="media-object">
                </div>
                <div class="media-body">
                    <h4 class="media-heading">内容</h4>
                    <p>金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯</p>
                </div>
             </div>    
        </div>
         <div class="media">
                <div class="media-left media-center">
                    <img  src="img\0.png" alt="图片" class="media-object">
                </div>
                <div class="media-body">
                    <h4 class="media-heading">内容</h4>
                    <p>金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯金克斯</p>
                </div>
              </div>
    </div>    
    </div>


</li>
</ul>


    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

 

bootstrap学习11-进度条媒体对象和well组件


联系
我们