媒体对象

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

时间： 2024-10-18 01:48:27

媒体对象的相关文章

Bootstarp学习（十八）媒体对象

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

Bootstrap_媒体对象

一.基本媒体对象媒体对象一般是成组出现,而一组媒体对象常常包括以下几个部分: ? 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容 ? 媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片 ? 媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容 ? 媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选除了上面四个部分之外,在Bo

Bootstrap媒体对象

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

Bootstrap历练实例：默认的媒体对象

Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. 媒体对象轻量标记.易于扩展的特性是通过向简单的标记应用 class 来实现的.你可以在 HTML 标签中添加以下两种形式来设置媒体对象: .media:该 class 允许将媒体对象里的多媒

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

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

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 s

【转】详解Bootstrap媒体对象

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

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

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

详解Bootstrap媒体对象

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

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