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

引入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. 基于maven的javaweb项目模块化开发

    转自:https://my.oschina.net/kingfire/blog/273381 基于maven的javaweb项目模块化开发 引言 考虑团队拥有多个类似项目的情况,比如一些功能差异不大的 ...

  2. HTML A标签 href click事件冲突

    转自:https://blog.csdn.net/xinglu/article/details/45199337

  3. Apache Allow 命令

    用于设置哪些客户端可以访问 Apache,格式如下: Allow from [All /全域名/部分域名/IP 地址/网络地址/CIDR 地址] All:表示全部客户端 全域名:表示域名对应的客户端, ...

  4. 解决springmvc 乱码的方法

    post乱码: 在web.xml添加post乱码filter: <filter> <filter-name>CharacterEncodingFilter</filter ...

  5. MongoDB入门_MongoDB安装与配置

    MongoDB运行环境 MongoDB环境:CentOS-6.7-i386 MongoDB版本:MongoDB 2.6.5 ssh工具:xshell 文本编辑工具:vim与editplus++ 编译M ...

  6. vb中的资源文件

    --- 一．VB中资源文件的分类 ---- 通常将资源分为两类:1.字符串资源,包括菜单和文本中使用的字符串,如"Hello World"等:2.二进制资源,如位图(.BMP),图 ...

  7. 长沙理工大学第十二届ACM大赛L 选择困难症 （剪枝暴搜）

    链接:https://ac.nowcoder.com/acm/contest/1/L 来源:牛客网 选择困难症 时间限制:C/C++ 3秒,其他语言6秒 空间限制:C/C++ 131072K,其他语言 ...

  8. Tomcat与jdk在Linux上的安装与配置

    本人qq群也有许多的技术文档,希望可以为你提供一些帮助(非技术的勿加). QQ群:   281442983 (点击链接加入群:http://jq.qq.com/?_wv=1027&k=29Lo ...

  9. 每日一蠢 .kettle 下的kettle.properties文件内配置的内容不能被识别

    昨天装封装好的ETL 工具  窝将环境变量中的KETTLE_HOME删除了, 结果 .kettle 下的kettle.properties文件内配置的内容不能被识别 can't parse argum ...

  10. mysql CREATE DATABASE语句 语法

    mysql CREATE DATABASE语句 语法 作用:创建数据库. 大理石构件 语法:CREATE DATABASE database_name mysql CREATE DATABASE语句 ...