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

最新推荐文章于 2025-08-15 22:56:20 发布
转载 最新推荐文章于 2025-08-15 22:56:20 发布 · 103 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/daniel-lij/p/6391200.html
文章标签：

#javascript #ViewUI

本文通过具体实例介绍了Bootstrap中进度条和媒体对象组件的应用方法，包括不同样式和状态的进度条及媒体对象列表。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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>

 

转载于:https://www.cnblogs.com/daniel-lij/p/6391200.html

bootstrap组件 -- (笔记三)
lljxk2008的博客
10-22 299
 添加该 pagination样式来在页面上显示分页 &lt;ul class="pagination"&gt;     &lt;li&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;     &lt;li&gt;&lt;a href="#"&gt;1&lt;/
Bootstrap4官方模板Hyper - Responsive Bootstrap 4 Admin Dashboard v1.5.0.zip
08-07
5. **Card组件**：卡片（Card）组件取代了以前的Panel、Well和Thumbnail，提供了更加灵活的内容容器。 **Hyper模板特色** 1. **响应式布局**：Hyper模板设计时充分考虑了移动设备，无论在桌面还是移动设备上都能...
Bootstrap进度条媒体对象和Well组件
Just The Way You Are
07-16 669
Well组件 可以实现简单地嵌入效果 Well 是一种会引起内容凹陷显示或插图效果的容器 div中，为了创建 Well，只需要简单地把内容放在带有 class .well 的div中即可<!-- Well组件:嵌入效果 --> <div class="well">一辈子很长</div> <div class="well well-lg">要跟有趣的人</div>
Bootstrap 学习笔记5 进度条媒体对象和well组件
weixin_30822451的博客
06-11 106
　　代码： <ul class="media-list"> <li class="media"> <div class="media-left"> <img src="img/pic.png" alt="" clas...
Bootstrap 第11章 进度条媒体对象和Well组件
一直专注于互联网
12-28 112
&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, us
Bootstrap(10) 进度条媒体对象和 Well 组件
weixin_30747253的博客
08-03 118
一．Well 组件这个组件可以实现简单的嵌入效果。 <!-- //嵌入效果 --> <div class="well">Bootstrap</div> <!-- //有 lg 和 sm 两种可选值 --> <div class="well well-lg">Bootstrap&...
Bootstrap 进度条媒体对象和 Well 组件
weixin_34255793的博客
05-14 100
一．Well 组件这个组件可以实现简单的嵌入效果。//嵌入效果<div class="well"> Bootstrap</div> //有 lg 和 sm 两种可选值<div class="well well-lg"> Bootstrap</div> 二．进度条组件进度条组件为当前工作流程或动作提供时时反馈。//基本进度条<div class=...
第 11 章 进度条媒体对象和 Well 组件
09-07 98
本节课我们主要学习一下 Bootstrap 的三个组件功能：Well 组件、进度条组件、媒体对 象组件。 一．Well 组件 这个组件可以实现简单的嵌入效果。 //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 sm 两种可选值 <div class="well well-lg"&g...
bootstrap进度条媒体对象和Well组件
涂涂
07-20 434
学习笔记 一．Well 组件 这个组件可以实现简单的嵌入效果。 //嵌入效果 Bootstrap //有lg 和sm 两种可选值 Bootstrap 二．进度条组件 进度条组件为当前工作流程或动作提供时时反馈。 //基本进度条     60% //最低值进度条    0% //结合情景的进度条 60% //条纹状，IE1
进度条媒体对象和Well组件
lql_h的博客
05-27 222
一．Well组件 这个组件可以实现简单的嵌入效果。 //嵌入效果 <div class="well">Bootstrap</div> //有lg和sm两种可选值 <div class="well well-lg">Bootstrap</div> <div class="well well-sm"> Bootst...
【Bootstrap学习笔记】5.巨幕页头缩略图和警告框组件、进度条媒体对象和Well组件
sunraito的博客
08-19 399
十、巨幕页头缩略图和警告框组件 学习内容 ● 巨幕组件 1.巨幕组件主要是展示网站的关键性区域 2.两种形式，一种是固定在一个width范围内，有圆角；另一种是width全屏，没有圆角 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 ...
Bootstrap2 组件.pdf_前端学习资料
09-01
**其他组件**：还包括页头（header）、缩略图（thumbnail）、警告框（alert）、进度条（progress bar）、媒体对象（media object）、列表组（list group）、面板（panel）以及响应式的嵌入内容（embed-responsive）...
electron进程间通信- 从渲染进程到主进程
唐璜Taro的博客
08-13 1059
本文介绍了Electron中的IPC进程间通信机制，重点解析了从渲染进程到主进程的单向通信实现方式。这种设计既保证了功能实现，又遵循了Electron的安全通信原则，是开发桌面应用的常用模式。
Go语言实战案例:静态资源服务（CSS、JS、图片）
tenkofx的博客
08-15 553
• Gin 提供Static()方法一行就能完成静态文件托管。• 静态文件路径映射和 URL 前缀可以灵活配置。• 结合 HTML 模板，可以很方便地构建完整的前端页面服务。
MoonBit Perals Vol.05: 函数式里的依赖注入：Reader Monad
m0_74743788的博客
08-13 1333
普通的函数就像一个流水线，你丢进去一袋面粉，然后直接跑到生产线末端，等着方便面出来。但这条流水线需要自动处理中间的所有复杂情况：没放面粉/“没有下单，期待发货”（null）面团含水量不够把压面机干卡了（抛出异常）配料机需要读取今天的生产配方，比如是红烧牛肉味还是香菇炖鸡味（读取外部配置）流水线末端的打包机需要记录今天打包了多少包（更新计数器）Monad 就是专门管理这条复杂流水线的“总控制系统”。它把你的数据和处理流程的上下文一起打包，确保整个流程能顺畅、安全地进行下去。
20道Vue框架相关前端面试题及答案
qq_39540458的博客
08-14 1045
Vue是一个渐进式JavaScript框架，具有响应式数据绑定、组件化开发等核心特性。面试常见问题包括：双向数据绑定原理（Vue2使用Object.defineProperty，Vue3改用Proxy）、生命周期钩子（如created、mounted）、组件通信方式（props/emit、provide/inject等）、计算属性与监听器的区别、v-if与v-show的适用场景等。Vuex用于状态管理，包含state、mutations等核心概念；Vue Router支持hash和history两种路由模式
基于SpringBoot校园管理系统
2501_90968670的博客
08-13 1279
校园管理系统是一个基于Spring Boot + Vue.js的全栈应用，专注于高校内部的多角色协作管理。系统实现了院校管理、单位管理、用户管理、通知推送、投票管理等功能模块，满足管理员、院校管理员、普通用户三类角色的不同操作需求。核心目标是提升校园管理效率，实现通知精准推送与数据可视化统计。
VUE3 学习笔记2 computed、watch、生命周期、hooks、其他组合式API
mashirokayo的博客
08-15 1137
在vue3中，虽然也能写vue2的computed，但还是更推荐使用vue3语法的computed。computed是一个函数。它的参数接收一个函数，这个函数可以是普通函数，也可以是箭头函数，由于vue3中没有this，所以无需关注函数类型对this指向的影响。这个函数就是计算的方法函数。但是通过这种方式定义的计算属性，是只读的，无法对属性进行修改。如果计算属性同时需要读取和修改，要通过下面这种形式：传入computed的参数是一个对象，在对象中配置get和set。
JavaScript 核心基础：类型检测、DOM 操作与事件处理
最新发布
热爱音乐和二次元！
08-15 1047
本文系统梳理 JavaScript 核心知识点，包括数据类型检测规则、遍历方式、DOM操作和事件处理。重点解析 typeof 运算符对不同数据类型的检测结果，数组与对象的遍历方法差异，以及使用 querySelector 获取元素的现代方案。同时详细讲解事件绑定的两种方式（onclick 覆盖 vs addEventListener 多播）和事件冒泡机制，帮助开发者构建扎实的 JS 基础，写出更健壮的代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值