Bootstrap 媒体对象列表组

@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <link href="~/Bootstrap3.3.7/css/bootstrap.min.css" r…

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

Bootstrap媒体对象

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

测开之路一百一十三：bootstrap媒体对象

实现效果,左边是图片或者其他媒体,右边是对应的描述引入bootstrap和jquery标签 class="media" 数量多一些看着就会很规整 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>bootstrap布局</title> …

BootStrap学习(5)_多媒体对象&列表组

一.多媒体对象这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. .media:该 class 允许将媒体对象里的多媒体(图像.视频.音频)浮动到内容区块的左边或者右边. .media-list:如果你需要一个列表,各项内容是无序列表的一部分,可以使用该 class.可用于评论列表与文章列表. 1.基本多媒体对象 <!DOCTYPE html> <html xmlns=…

移动web——bootstrap媒体对象

基本模板 1.这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等) <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object" src="..." alt="..."> </a> <…

Bootstrap <基础二十八>列表组

列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 class .list-group-item. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的列表组</title> <link href="/boo…

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

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

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

一．Well 组件这个组件可以实现简单的嵌入效果.  <div class="well">Bootstrap</div>  <div class="well well-lg">Bootstrap</div> <div class="well well-sm">Bootstrap<…

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

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

Bootstrap_媒体对象

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

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

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

媒体对象 - Media Objects（摘录）

原文链接:http://www.jianshu.com/p/6443be21efbd 一个媒体对象由以下及部分组成父容器 .media 媒体部分 .media-left 或者 .media-right,其内部包含图像使用 <img> 同时设置 .media-object 内容部分 .media-body ,其内部包含标题 <h1> 同时设置 .media-heading ,还可以设置小标题 <small> <div class="media"…

bootstrop媒体对象、面板和Well

媒体对象 <div class="media"> <div class="media-left"> <a href="#"> <img src="imgs/meinv.jpg" class="media-object" width="200" height="200">…

Bootstrap3.0（进度条、媒体对象、列表组、面板）

Bootstrap3.0学习第十六轮(进度条.媒体对象.列表组.面板) 前言阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来讲解以下内容 1.进度条 2.媒体对象 3.列表组 4.面板 5.总结进度条提供工作或动作的实时反馈,只用简单且灵活的进度条. 跨浏览器兼容性进度条使用了CSS3的transition和animation属性来完成一些效果.这些特性在Interne…

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

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

详解Bootstrap列表组组件

列表组可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码: LESS:list-group.less SASS:_list-group.scss 列表组看上去就是去掉了列表符号的列表项,并且配上一些特定的样式,在bootstrap框架中的基础列表组主要包括两个部分: list-group:列表组容器,常用的是ul元素,也可以是ol或div元素 list-group-item:列表项,常用的是l…

Bootstrap入门（二十二）组件16：列表组

Bootstrap入门(二十二)组件16:列表组列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5.情景类 6.定制内容 1.默认样式列表组最简单的列表组仅仅是一个带有多个列表条目的无序列表 <div class="container"> <ul class="list-group"> <li </li> <li &l…

Bootstrap入门（十四）组件8：媒体对象

Bootstrap入门(十四)组件8:媒体对象这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等). 1.基本样式 2.嵌套使用 3.图片位置 4.使用<ul><li>标签嵌套使用先引入本地的CSS文件 <link href="bootstrap.min.css" rel="stylesheet"> 1.基本样式我们先在容器div中创建一个clas…

Bootstrap列表组

前面的话列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.本文将详细介绍Bootstrap列表组基础列表组基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式.在Bootstrap框架中的基础列表组主要包括两个部分: ☑ list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素 ☑ list-group-item:列表项,常用的是li元素,当然也可以是div元素对于基础…

Bootstrap -- 缩略图、进度条、列表组、面板

Bootstrap -- 缩略图.进度条.列表组.面板 1. 缩略图大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: (1) 在图像周围添加带有 class .thumbnail 的 <a> 标签. (2) 这会添加四个像素的内边距(padding)和一个灰色的边框. (3) 当鼠标悬停在图像上时,会动画显示出图像的轮廓使用缩略图: <!DOCTYPE html&…

第二百四十二节，Bootstrap列表组面板和嵌入组件

Bootstrap列表组面板和嵌入组件学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应式嵌入组件. 一．列表组组件列表组组件用于显示一组列表的组件. 基本实例 list-group样式class类,写在<ul>里,声明列表组(Bootstrap)list-group-item样式class类,写在列表组<li>里,设置列表组里的列表样式(Bootstrap) <ul c…

Bootstrap学习2--组件-列表组

备注:最新Bootstrap手册:http://www.jqhtml.com/bootstraps-syntaxhigh/index.html 1.列表组列表组是Bootstrap框架新增的一个组件,可以用来制作列表清单.垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件.由于其在Bootstrap是一个独立的组件,所以也对应有自己独立源码: ☑ LESS版本:对应的源码文件 list-group.less ☑ Sass版本:对应的源码文件是 _list-group.scss ☑ 编译出的…

Bootstrap历练实例：嵌套的媒体对象

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:嵌套的媒体对象</title> <meta charset="utf-8" /> <meta name="viewp…

Bootstrap历练实例：向列表组添加内容

向列表组添加自定义内容我们可以向上面已添加链接的列表组添加任意的 HTML 内容.下面的实例演示了这点: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:向列表组添加内容</title> <meta ch…

Bootstrap历练实例：向列表组添加链接

向列表组添加链接通过使用锚标签代替列表项,我们可以向列表组添加链接.我们需要使用 <div> 代替 <ul> 元素.下面的实例演示了这点: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:向列表组添…

Bootstrap历练实例：带徽章的列表组

向列表组添加徽章我们可以向任意的列表项添加徽章组件,它会自动定位到右边.只需要在 <li> 元素中添加 <span class="badge"> 即可.下面的实例演示了这点: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <…

Bootstrap历练实例：默认的列表组

Bootstrap 列表组本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 class .list-group-item. 下面的实例演示了这点: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q…

Bootstrap历练实例：带列表组的面板

带列表组的面板我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组.您可以从列表组一章中学习如何创建列表组. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <…

bootstrap警告框、进度条和列表组

警告框 <div class="container"> <div class="alert alert-success" role="alert"> 你好,喵星人! </div> <div class="alert alert-danger" role="alert"> 你好,喵星人!…

【Bootstrap 媒体对象列表组】的更多相关文章