<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>进度条媒体对象和well组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin: 100px;"> <!-- <div class="well"> well </div> <div class="well well-sm"> well </div> --> <!-- <div class="progress"> <div class="progress-bar" style="width: 60%">60%</div> </div> <div class="progress"> <div class="progress-bar" style="width: 0%; min-width: 20px;">0%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 60%; min-width: 20px;">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 60%; min-width: 20px;">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 20%; min-width: 20px;">20%</div> <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 40%; min-width: 20px;">40%</div> <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 40%; min-width: 20px;">40%</div> </div> --> <!-- <div class="media"> <div class="media-left media-bottom"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> </div> </div> <div class="media"> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> </div> <div class="media-right media-middle"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> </div> --> <ul class="media-list"> <li class="media"> <div class="media-left"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> <div class="media"> <div class="media-left"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> <div class="media"> <div class="media-left"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> </div> </div> </div> </div> <div class="media"> <div class="media-left"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> </div> </div> </div> </li> <li class="media"> <div class="media-left media-bottom"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> </div> </li> </ul> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图：
相关推荐
Bootstrap是一款广泛应用于网页开发的前端框架，以其响应式布局、易于使用和丰富的组件而闻名。在本主题中，我们关注的是“Bootstrap彩色斑马线条纹进度条设计效果”，这是一个利用Bootstrap的强大功能，结合CSS3...
Bootstrap进度条是Bootstrap框架中的一种组件，用于展示数据加载的进度。通过设置进度条的值，可以展示当前数据加载的进度。Bootstrap进度条组件提供了多种样式和颜色，可以根据需要选择不同的样式和颜色。 在上述...
在网页开发中，jQuery、Bootstrap和百分比进度条是常见的元素，它们可以帮助我们构建美观且交互性强的用户界面。本文将深入探讨如何基于jQuery和Bootstrap实现一个动态的百分比横向图表。 首先，jQuery是一个轻量级...
Bootstrap是世界上最流行的前端开发框架之一，它为网页设计师和开发者提供了丰富的组件和工具，使得创建响应式、美观的网站变得更加简单。在Bootstrap中，进度条是用于显示某个过程的完成程度，例如数据加载、视频...
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，以便快速构建响应式、易用的网站。在Bootstrap中，步骤进度条（Step Progress Bar）是一种实用的组件，用于显示一系列任务或过程的...
在网页设计和开发中，Bootstrap是一个非常流行的前端框架，它提供了丰富的组件和样式，使得开发者可以快速构建响应式、移动优先的网站。本资源“基于Bootstrap的爬虫样式进度条特效”是针对Bootstrap的一种创意应用...
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，以便快速构建响应式、移动优先的网站。在本资源"Bootstrap制作超酷进度条UI动画.zip"中，我们将探讨如何利用Bootstrap的进度条组件...
这主要依赖于Bootstrap的栅格系统和媒体查询。在CSS中，可以通过设置不同断点的样式来调整在不同屏幕尺寸下的显示。 此外，数字显示是通过JavaScript或者CSS伪元素实现的，通常会监听`<progress>`元素的`...
这个“炫酷Bootstrap进度条美化效果”资源旨在提升Bootstrap内置进度条组件的视觉吸引力，使其更加吸引用户注意力，同时保持其功能性和易用性。 Bootstrap的进度条组件是一个简单而灵活的工具，通常用于表示任务或...
Bootstrap，作为最流行的前端开发框架之一，提供了一系列预定义的样式和组件，其中包括简洁且可定制的进度条。在原生Bootstrap的进度条基础上，通过添加CSS3代码，我们可以进一步提升其视觉吸引力，实现更丰富的动画...
总的来说，"Bootstrap炫酷多彩渐变进度条动画特效"是通过扩展Bootstrap的进度条组件，结合CSS3的渐变和过渡属性，为用户界面增添了一抹动感和视觉吸引力。这种效果不仅可以提升用户体验，也能让网站显得更加现代化和...
Bootstrap是一款广泛应用于网页设计与开发的前端框架，它提供了一系列优雅的组件和工具，使得开发者可以快速构建响应式、移动优先的网站。在本压缩包中，“Bootstrap百分比进度条动画特效”是一个关于如何利用...
总的来说，“bootstrap彩色斑马进度条”是一个富有创意的Bootstrap扩展，它为网页设计师和开发者提供了一个工具，使得进度条组件不仅可以传递信息，还可以成为提升用户体验的一个亮点。无论你是网页设计新手还是经验...
Bootstrap是一款广泛使用的前端框架，它提供了丰富的组件和样式，帮助开发者快速构建响应式和移动优先的网站。在这款"Bootstrap炫酷多彩渐变进度条动画特效"中，我们将深入探讨如何利用Bootstrap的进度条组件...
Bootstrap 是一个广泛使用的前端开发框架，它为创建响应式、移动优先的网页提供了一系列的工具和组件。在Bootstrap中，进度条（Progress Bar）是一种显示任务进度或指示完成度的有效方式，尤其适用于加载、上传、...
在第8章“输入框和导航组件”中，我们将深入探讨Bootstrap如何处理表单元素和导航结构，这两部分是任何网页设计中的关键组成部分。 **一、输入框组件** Bootstrap的输入框组件（Form Controls）为创建美观且功能...
bootstrap-progressbar是一款功能非常齐全的基于Bootstrap的jQuery进度条插件。该bootstrap进度条插件提供了对所有版本的Bootstrap的支持。它通过jQuery和CSS3 transition完成进度条的动画功能，可以显示当前的进度...
在本篇学习笔记中，我们将重点探讨Bootstrap中的两个关键元素：进度条（Progress Bars）和媒体对象（Media Objects）。 1. **基础进度条**： Bootstrap的基础进度条是一个简单的水平条，用于表示某个过程的完成...
在本资源中，"Bootstrap漂亮超酷动画进度条代码" 提供了一种方法，用以增强原生Bootstrap进度条组件的视觉效果，通过添加CSS3动画，使进度条更加吸引用户注意力。 原生的Bootstrap进度条是一个简单的HTML元素，通常...
Bootstrap 是一个流行的前端框架，它提供了丰富的组件和样式，以帮助开发者快速构建响应式移动优先的网页。进度条是 Bootstrap 中的一个实用组件，用于显示任务的进度或者加载状态。本文将详细介绍如何使用 ...