基本模板

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. HTTP Simple Storage

    ubuntu12.10桌面版 1.安装FastCGI /usr/bin/spawn-fcgi这个文件来管理 FastCGI,它原属于lighttpd这个包里面,但 9.10 后,spawn-fcgi被 ...

  2. Linux下汇编语言学习笔记71 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  3. android中listview点击事件的监听实现

    listview_bookmark.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public vo ...

  4. 学一学书里的django是怎么写views.py的

    他山之石,可以攻玉嘛. 好的习惯有时也是学别人来养成的. 外国人的编码习惯,学啊. from django.core.urlresolvers import reverse_lazy from dja ...

  5. KonBoot – 只要5K映象文件轻易绕过您的WindowsXP/VISTA/7系统的密码

    http://pannisec.diandian.com/?tag=konBoot 这个东西是我昨晚点击了QQ弹窗的那个SOSO问题后,有人问我如何破解Windows登陆密码,且不可以用net命令创建 ...

  6. Spring Web Flow 入门demo（二）与业务结合 附源代码

    第一部分demo仅仅介绍了简单的页面跳转,接下来我们要实现与业务逻辑相关的功能. 业务的逻辑涉及到数据的获取.传递.保存.相关的业务功能函数的调用等内容,这些功能的实现都可用Java 代码来完毕,但定 ...

  7. 软考-系统开发与软件project

    关于软件project方面的知识,相信大家都不陌生,软考中这部分知识也是重点考察范围,关于软件project的知识点很的琐碎.我把这部分的知识点分成了五部分,各自是软件project的基础知识.开发管 ...

  8. [DB][MySql]关于取得自增字段的值、及@@IDENTITY 与并发性问题

    对于刚从Oracle转向MySql的人都会为,MySql中没有Oracle里的Sequence而感到困惑.MySql中没有了Sequence,那么MySql的主键用什么方式来实现最好呢? 主要有下面几 ...

  9. 浅析js的函数的按值传递参数

    js的函数传参的方式是按值传递,正常情况下,改变函数参数的值,并不会对函数外部的变量造成影响.例如: 'use strict';var list = [1, 2, 3]; list.forEach(f ...

  10. 【TJOI 2018】数学计算

    [题目链接] 点击打开链接 [算法] 线段树维护区间乘积 [代码] #include<bits/stdc++.h> using namespace std; #define MAXQ 10 ...