实现效果，左边是图片或者其他媒体，右边是对应的描述

引入bootstrap和jquery标签

class="media"

数量多一些看着就会很规整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap布局</title>
    <!--网页源数据跨平台兼容做一些说明-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--跨屏自适应说明-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>bootstrap媒体对象</h1>

<!--媒体对象-->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="media">
                <div class="media-left"><!--图片，media-left 放左边-->
                    <a href="#">
                        <img src="http://temp.im/80x80" class="media-object img-circle"><!--img-circle圆形图片-->
                    </a>
                </div>
                <div class="media-body"><!--media-body 正文部分-->
                    <h4 class="media-heading">这是正文部分</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque delectus eum exercitationem
                            facere iusto mollitia numquam officiis omnis placeat velit. At, dolor ex id qui recusandae sequi
                            suscipit veritatis voluptatum!</p>
                </div>
            </div>            <div class="media">
                <div class="media-left"><!--图片，media-left 放左边-->
                    <a href="#">
                        <img src="http://temp.im/80x80" class="media-object img-circle"><!--img-circle圆形图片-->
                    </a>
                </div>
                <div class="media-body"><!--media-body 正文部分-->
                    <h4 class="media-heading">这是正文部分</h4>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque delectus eum exercitationem
                            facere iusto mollitia numquam officiis omnis placeat velit. At, dolor ex id qui recusandae sequi
                            suscipit veritatis voluptatum!</p>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

测开之路一百一十三：bootstrap媒体对象的更多相关文章

  1. 测开之路一百一十二：bootstrap按钮

    bootstrap按钮 引入bootstrap和jquery 普通按钮和bootstrap风格按钮 调整大小 块级按钮 禁用按钮 disabled 按钮分组 分页按钮

  2. 测开之路一百一十一：bootstrap表单

    bootstrap表单 引入bootstrap和jquery 默认表单 垂直表单 表单属性绑定:for属性,当for的属性和id的属性相同时,单击for标签,光标自动跳到相同属性的输入框 复选框 水平 ...

  3. 测开之路一百一十：bootstrap图片

    bootstrap图片 引入bootstrap 原版的图片 bootstrap处理后的: 圆角.圆形.缩略图 自适应窗口

  4. 测开之路一百五十三：ajax之load、get、ajax在项目中的体现

    在查询的时候是使用ajax进行请求的 目录结构 personal.models from datetime import datetimefrom flask_sqlalchemy import SQ ...

  5. 测开之路一百四十三：ORM框架之SQLAlchemy模型及表创建

    基于前一篇内容,可以使用模型的结构 目录结构 main,入口层 from flask import Flaskfrom flask_sqlalchemy import SQLAlchemy app = ...

  6. 测开之路一百三十三：实现sql函数封装

    连接数据库的频率很高,所以把数据库操作封装起来 函数封装: def make_dicts(cursor, row): """ 将游标获取的Tuple根据数据库列表转换为d ...

  7. 测开之路一百二十三：快速搭建python虚拟环境

    前提:已装好python3.4+且环境可正常运行 一:手动搭建: 准备好一个工作目录 管理员运行cmd,进入到准备的目录里面 执行命令:python -m venv 虚拟环境名 激活虚拟环境(在ven ...

  8. 详解Bootstrap媒体对象

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

  9. Bootstrap媒体对象

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

随机推荐

  1. Ajax&Json笔记

    ## 今日内容     1. AJAX:     2. JSON # AJAX:     1. 概念: ASynchronous JavaScript And XML    异步的JavaScript ...

  2. iOS之Run Loop详解

    转自标哥的技术博客(www.henishuo.com) 前言 做了一年多的IOS开发,对IOS和Objective-C深层次的了解还十分有限,大多还停留在会用API的级别,这是件挺可悲的事情.想学好一 ...

  3. vimdiff 可视化比较工具

    1.命令功能 vimdiff调用vim打开文件,可以同时打开2~4个文件,最多4个文件,且会以不同的颜色来区分文件的差异. 2.语法格式 vimdiff file1 file2 3.使用范例 [roo ...

  4. Codeforces 907 矩阵编号不相邻构造 团操作状压DFS

    A. #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a)) #de ...

  5. 树莓派vnc连接时PyQt（或Qt）键盘键位混乱的解决办法

    使用树莓派通过vnc连接到PC端,运行PyQt时会发现键盘输入时候乱码,按下abcde对应出现asdfg.是由于vnc版本不合适造成的. 解决方法: 1.删除原有vnc sudo apt-get re ...

  6. Cron表达式 详解

    Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: (1) 7个域: Seconds Minutes Hours DayofMon ...

  7. Facebook再现丑闻，约100位应用程序开发人员偷看用户数据

    Facebook今天披露了另一起安全事件,承认大约100名应用程序开发人员可能不正确地访问了某些Facebook组中的用户数据,包括他们的姓名和个人资料图片. 在周二发布的博客文章中,Facebook ...

  8. Python3 install pip

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/12033910.html curl https://bootstrap.pypa.io/get-pip. ...

  9. apply()的使用

    apply()方法的另一种使用,就是可以代替一次for循环 在封装 document.getElementsByTagName的时候,需要把伪数组转为一个真的数组,其是也不是真的数组 typeof 出 ...

  10. C#与.NET Framework c#编程语言，和java是一样的。（c#,java） -->javaweb,asp.net