基本模板

1、这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）

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

基本使用

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <style>

        .zhi:hover {

            color: red;

        }

        .glyphicon.glyphicon-wrench {

            font-size: 37px;

        }

    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<a class="media zhi">

    <div class="media-left ">

        <!--<a href="#">-->

        <!--<img class="media-object" src="" alt="...">-->

        <!--</a>-->

        <span class="glyphicon glyphicon-wrench"></span>

    </div>

    <div class="media-body">

        <h4 class="media-heading">wuyihexiaoerweizhi</h4>

        认识世界，感动世界

    </div>

</a>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="js/jquery.min.js"></script>

<!-- Include all compiled plugins (below), or include individual files as needed -->

<script src="js/bootstrap.min.js"></script>

</body>

</html>

移动web——bootstrap媒体对象的更多相关文章

  1. 详解Bootstrap媒体对象

    在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架中其对应的版本文件如下: LESS: media.l ...

  2. Bootstrap媒体对象

    前面的话 在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居右),内容居右(或居左)排列.常常把这样的效果称为媒体对象.可以说它是一种抽象的样式,可以用来构建不同类型的组件.本文将 ...

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

    实现效果,左边是图片或者其他媒体,右边是对应的描述 引入bootstrap和jquery标签 class="media" 数量多一些看着就会很规整 <!DOCTYPE htm ...

  4. Bootstrap 媒体对象 列表组

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

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

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

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

    Bootstrap入门(十四)组件8:媒体对象 这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等). 1.基本样式 2. ...

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

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

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

    第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...

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

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. hdu3303

    分析:一个最暴力的想法是把加入到集合S的数据一个个按顺序保存起来,然后每次查询的时候由后向前计算余数,如果遇到余数为0的,就直接把时间输出,否则就一直比较到最后找余数最小时间最晚的,这样查询的时间复杂 ...

  2. 洛谷—— P2149 [SDOI2009]Elaxia的路线

    https://www.luogu.org/problem/show?pid=2149 题目描述 最近,Elaxia和w的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们 必须合理地安排两 ...

  3. HDFS2.0之简单总结

    新特性 NameNode支持HA 命名空间支持分区(Federation) 支持ViewFS 支持目录快照 支持权限ACL 支持缓存指定的文件 QJM实现名字节点HA (图片来源互联网) 命名空间分区 ...

  4. css3 字体自适应

    css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width 1vh = 1% ...

  5. 【CV论文阅读】Rank Pooling for Action Recognition

    这是期刊论文的版本,不是会议论文的版本.看了论文之后,只能说,太TM聪明了.膜拜~~ 视频的表示方法有很多,一般是把它看作帧的序列.论文提出一种新的方法去表示视频,用ranking function的 ...

  6. 在psql客户端中修改函数

    \ef 创建一个新的函数. \df 显示已经创建的函数. \df+    somefunc 显示这个函数的详细定义 \ef   somefunc 编辑这个函数, 编辑保存退出之后,要执行 \g ,刚才 ...

  7. 你有必要知道的 25 个 JavaScript 面试题

    1.使用 typeof bar === "object" 推断 bar 是不是一个对象有神马潜在的弊端?怎样避免这样的弊端? 使用 typeof 的弊端是显而易见的(这样的弊端同使 ...

  8. ViewPager + Handler 实现的图片自己主动轮播

    首先上图看效果 我也是在网上看各种大牛们做的效果,非常多都是自己定义重写了一些控件来实现这个效果的. 我把当中的一位大牛写的ViewPager的效果加上了Handler实现了自己主动轮播效果.在此做个 ...

  9. 【Cocos2dx游戏开发】Cocos2d-x简介

    一.简介 最近在做一个Android下的卡牌游戏--<九州幻想>开发项目,而我们使用的引擎是Cocos2dx,所以想要写写笔记来记录一下项目中的收获.当然首先稍微介绍一下Cocos2d-x ...

  10. Codeforces 196 D. The Next Good String

    D. The Next Good String time limit per test 2 seconds memory limit per test 256 megabytes input stan ...