Bootstrap学习笔记之进度条、媒体对象实例详解

1.基础进度条

要写在<div class="progress"></div>里面。

<div class="col-md-6">
 <div class="progress">
 <div class="progress-bar" style="width:30%;"></div>
 </div>
</div>

2.多彩进度条

<div class="col-md-6">
 <div class="progress">
 <div class="progress-bar" style="width:30%;"></div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-danger" style="width:40%;"></div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-info" style="width:50%;"></div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-warning" style="width:60%;"></div>
 </div>
 <div class="progress">
 <div class="progress-bar progress-bar-success" style="width:70%;"></div>
 </div>
</div>

3.条纹状进度条

在类progress基础上添加类progress-striped如下：

<div class="progress progress-striped">
 <div class="progress-bar" style="width:30%;"></div>
</div>

4. 进度条动画样式

给进度条添加类active，如下：

<div class="progress progress-striped">
 <div class="progress-bar active" style="width:30%;"></div>
</div>

5.堆叠式进度条

都写在一个progress内，如下：

<div class="progress">
 <div class="progress-bar progress-bar-success" style="width:10%;"></div>
 <div class="progress-bar progress-bar-warning" style="width:20%;"></div>
 <div class="progress-bar progress-bar-info" style="width:30%;"></div>
</div>

6.媒体对象

媒体对象就是图文混排。左边可以是图片、视频。右边是对其描述。

<div class="col-md-6">
 <div class="media">
 <div class="media-left media-middle">
 <a href="#" rel="external nofollow" >
  <img class="media-object" src="img/02.jpg" alt="">
 </a>
 </div>
 <div class="media-body">
 <h2 class="media-heading">我是标题</h2>
 <p>这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容</p>
 </div>
 </div>
 </div>

以上所述是小编给大家介绍的Bootstrap进度条、媒体对象实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap源码解读媒体对象、列表组和面板（10）

    媒体对象 基础媒体对象 例如: <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/350x150" alt="..."> </a> <div class="media-bo

  • Bootstrap媒体对象学习使用

    Bootstrap媒体对象学习使用

    Bootstrap媒体对象的学习使用,供大家参考,具体内容如下 基本结构: <div class="media"> <a class="pull-left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollo

  • Bootstrap媒体对象的实现

    Bootstrap媒体对象的实现

    在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架中其对应的版本文件如下: LESS: media.less SASS: _media.scss 媒体对象一般是成组出现,一组媒体对象一般包括以下几部分: 1.媒体对象的容器:用来容纳媒体对象的所有内容,容器上需使用类名.media 2.媒体对象的对象:一般是图片,需使用类.media-object 3.媒体对象的主体:就是媒体对象的主体内容,可以是任

  • 老生常谈Bootstrap媒体对象

    老生常谈Bootstrap媒体对象

    前面的话 在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居右),内容居右(或居左)排列.常常把这样的效果称为媒体对象.可以说它是一种抽象的样式,可以用来构建不同类型的组件.本文将详细介绍Bootstrap媒体对象 默认样式 媒体对象一般是成组出现,而一组媒体对象常常包括以下几个部分: ☑ 媒体对像的容器:常使用"media"类名表示,用来容纳媒体对象的所有内容 ☑ 媒体对像的对象:常使用"media-object"表示,就是媒体对象中的对象,常

  • Bootstrap每天必学之媒体对象

    Bootstrap每天必学之媒体对象

    在Web页面或者说移动页面制作中,常常看到这样的效果,左边居左(或居右),内容居右(或居左)排列,如下图所示: 我们常常把这样的效果称为媒体对象.可以说他是一种抽像的样式,可以用来构建不同类型的组件.这些组件都具有开篇所说的样式风格.那么在Bootstrap框架中特意将些部分提取出来做来一个组件介绍.其对应的版本文件: ☑ LESS版本:对应的源文件是media.less ☑ Sass版本:对应的源文件是_media.scss ☑ 编译后版本:对应bootstrap.css文件第4792行-第4

  • Bootstrap学习笔记之进度条、媒体对象实例详解

    Bootstrap学习笔记之进度条、媒体对象实例详解

    1.基础进度条 要写在<div class="progress"></div>里面. <div class="col-md-6"> <div class="progress"> <div class="progress-bar" style="width:30%;"></div> </div> </div> 2.

  • AngularJS学习笔记之表单验证功能实例详解

    本文实例讲述了AngularJS学习笔记之表单验证功能.分享给大家供大家参考,具体如下: 一.执行基本的表单验证 <!DOCTYPE html> <html ng-app='exampleApp'> <head> <meta charset="UTF-8"> <title>表单</title> <script src="../../js/angular.min.js" type="

  • Python学习笔记之迭代器和生成器用法实例详解

    本文实例讲述了Python学习笔记之迭代器和生成器用法.分享给大家供大家参考,具体如下: 迭代器和生成器 迭代器 每次可以返回一个对象元素的对象,例如返回一个列表.我们到目前为止使用的很多内置函数(例如 enumerate)都会返回一个迭代器. 是一种表示数据流的对象.这与列表不同,列表是可迭代对象,但不是迭代器,因为它不是数据流. 生成器 是使用函数创建迭代器的简单方式.也可以使用类定义迭代器 下面是一个叫做 my_range 的生成器函数,它会生成一个从 0 到 (x - 1) 的数字流:

  • Python学习笔记之字符串和字符串方法实例详解

    Python学习笔记之字符串和字符串方法实例详解

    本文实例讲述了Python学习笔记之字符串和字符串方法.分享给大家供大家参考,具体如下: 字符串 在 python 中,字符串的变量类型显示为 str.你可以使用双引号 " 或单引号 ' 定义字符串 定义字符串 my_string = 'this is a string!' my_string2 = "this is also a string!!!" # Also , we can use backslash '/' to escape quotes. this_strin

  • Python进度条tqdm的用法详解

    Python进度条tqdm的用法详解

    前言 有时候在使用Python处理比较耗时操作的时候,为了便于观察处理进度,这时候就需要通过进度条将处理情况进行可视化展示,以便我们能够及时了解情况.这对于第三方库非常丰富的Python来说,想要实现这一功能并不是什么难事. tqdm就能非常完美的支持和解决这些问题,可以实时输出处理进度而且占用的CPU资源非常少,支持windows.Linux.mac等系统,支持循环处理.多进程.递归处理.还可以结合linux的命令来查看处理情况,等进度展示. 大家先看看tqdm的进度条效果: tqdm安装:

  • Bootstrap笔记之缩略图、警告框实例详解

    Bootstrap笔记之缩略图、警告框实例详解

     1. 基础缩略图 给a标签添加类class="thumbnail"如下: <div class="row"> <div class="col-md-3 col-sm-6"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow"

  • C语言进度条的实现原理详解

    C语言进度条的实现原理详解

    目录 \r和\n 行缓冲区 进度条 \r和\n 在程序里面,\r和\n分别代表什么意思? \r:表示“回车”,即回到当前行的起始位置 \n:表示换行,即列不变,另其一个新行 行缓冲区 什么是行缓冲区?先别慌,来看代码一执行会是什么样的状态. //代码一,mytest.c文件 # include <stdio.h> int main(void) { printf("hello linux"); sleep(1); return 0; } 现象:光标休息一秒后,打印出hello

  • python3代码输出嵌套式对象实例详解

    我们都知道如果想让电脑运行更多的程序,就要增加它的配置才能带动.在之前的学习中,我们已经对函数的打印print有所了解,但是遇到更加复杂的对象,比如嵌套式的print的打印功能就不够用了. 有的小伙伴已经在寻找其他的函数,其实针对于这个问题,我们使用更高级的pprint就可以解决了,接下来用代码输出嵌套式对象给大家进行模拟. Python的默认print函数可以满足日常的输出任务,但如果要打印更大的.嵌套式的对象,那么使用默认的print函数打印出来的内容会很丑陋. 这个时候我们就需要pprin

  • JSP的request对象实例详解

    JSP的request对象实例详解

    JSP的request对象实例详解 一 request对象定义 客户端的请求信息被封装在request对象中,通过它才能了解客户的需求,然后做出响应.它是HttpServletRequest类的实例.request对象具有请求域,即完成客户端的请求之前,该对象一直有效. 二 request对象方法 三 实例 <%@ page language="java" import="java.util.*" contentType="text/html; ch

  • Java语言面向对象编程思想之类与对象实例详解

    在初学者学Java的时候,面向对象很难让人搞懂,那么今天小编就来为大家把这个思想来为大家用极为简单的方法理解吧. 首先我们来简单的阐述面向对象的思想. 面向对象: 官方的语言很抽象,我们把官方的解释和定义抛开.想想,自己有什么,对!!我们自己有手脚眼口鼻等一系列的器官.来把自己所具有的器官就可以看作我们的属性,自己是不是可以喜怒哀乐和嬉笑怒骂,这些是不是我们的行为,那么自己的具有的属性加自己有的行为就称为一个对象. 注意!!我们自己,一个个体是一个对象,因为,你是你,我是我,我们虽然有相同的,但

随机推荐