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

<!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>
时间： 2024-08-05 21:12:37

bootstrap学习11-进度条媒体对象和well组件的相关文章

第二百四十一节，Bootstrap进度条媒体对象和 Well 组件

第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件.进度条组件.媒体对 象组件. 一．Well 组件 这个组件可以实现简单的嵌入效果. 嵌入效果 well样式class类,写在<div>里,设置一个div区块嵌入效果(Bootstrap)well-lg样式class类,写在<div>里,设置一个div区块嵌入效果大尺寸(Boo

Bootstrap 进度条媒体对象和 Well 组件

一．Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二．进度条组件 进度条组件为当前工作流程或动作提供时时反馈. //进度条 <div class="progress"> <

第 11 章 进度条媒体对象和 Well 组件

学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件.进度条组件.媒体对象组件. 一．Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstra

（十）进度条媒体对象和 Well 组件

一．Well 组件 有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二．进度条组件 //基本进度条 <div class="progress"> <div class="progress-bar" style="width: 60%;">60%</div> </div> //最低值进度

缩略图\警示框\进度条\媒体对象\列表组\面板 组件

欢迎收看大奥编写的Bootstrap快速学习笔记(6)缩略图\警示框\进度条\媒体对象\列表组\面板 组件 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 缩略图 警示框 进度条 媒体对象 列表组 面板 详细介绍 缩略图 通过配合网格系统来实现,div.container>div.row>div.col-md-3 col-xs-6>a.thumbnail>img来实现,这样的效果就是当宽屏的时候能够一行显示4个缩略图,窄屏的时候一行显示两个

atitit.文件上传带进度条的实现原理and组件选型and最佳实践总结O7

1. 实现原理 1 2. 大的文件上传原理::使用applet 1 3. 新的bp 2 1. 性能提升---分割小文件上传,避免一次使用内存使用过大的 2 2. Uuid还是原来文件名称:: 2 3. 监听器频繁地被调用 2 4. 结合wz easyui 2 4. 选型 2 5. Uploadify::yash js+flash 3 6. commons-fileupload:: 3 7. COS这个工具O'Reilly公司 3 8. 大的文件上传组件总结 3 5. 林吧实现ui Ajax+jq

Bootstrap 警告、进度条、列表组

摘要:该部分包括警告.进度条等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success..alert-info..alert-danger..alert-warning.代码示例: 1 <div class="alert alert-success">成功</div> 2 <div class="alert alert-info">

Bootstrap中的进度条

进度条 在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等.就如下图所示的一个评分系统,他就是一个简单的进度条效果: 进度条和其他独立组件一样,开发者可以根据自己的需要,选择对应的版本: ? LESS版本:源码文件progress-bars.less ? Sass版本:源码文件_progress-bars.scss ? 编译后版本:bootstrap.css文件第4500行-第4575行 而且Bootstrap框架为大家提供多种样式风格的进度条,供大家使用,这一小节只是给大家直观上

bootstrap(6)关于进度条，列表，面板

一:进度条 首先我们可以看到进度条如下: 这种效果是如何实现的呢? 进度条代码如下: <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: