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

引入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. Redis---Redis与Memcached

    4.Redis与Memcached   两者都是非关系型内存键值,主要有以下不同: 数据类型   Memcached仅支持字符串类型,而Redis支持五种不同的数据类型,可以更灵活地解决问题. 数据持 ...

  2. WPF拖拽文件(拖入拖出)，监控拖拽到哪个位置，类似百度网盘拖拽

    1.往wpf中拖文件 // xaml <Grid x:Name="grid_11" DragOver="Grid_11_DragOver" Drop=&q ...

  3. Chrome开发者工具详解（四）之Elements、Console、Sources面板

    Elements面板 实时编辑DOM节点和CSS样式 双击DOM树视图里面的节点,可以实时编辑标签属性,修改的效果会立刻反应在浏览器里 点击右侧Style面板,可以实时修改CSS的属性值,这里面的所有 ...

  4. java体系中OOP，OOD，OOA分别代表什么含义，以及OA，CRM，ERP

    OOP:Object Oriented Programming 面向对象程序设计. OOD:Object Oriented Design 面向对象设计. OOA:Object Oriented Ana ...

  5. 安装RF

    pip install robotframework wxPython pip install robotframework-ride pip install --pre --upgrade robo ...

  6. 学习R的悬疑录（不定期更新）

    在使用caret包建模时候,没有导入机器学习包,如rpart.randomForest等,并不会对结果有影响.不知道是不是caret包内置了机器学习模块. # 加载r包 library(data.ta ...

  7. linux Apache 的安装

    rpm –qa httpd 查询是否安装了 Apache rpm –e 包名卸载安装程序 rpm –e --nodeps 包名卸载安装程序不产生依赖 #检查是否安装有依赖库 yum install – ...

  8. Python(1) 整型与浮动型

    整型与浮动型 整数/浮动数=浮点型整数/整数 = 浮点型 例如:>>> type(1/1)<class 'float'>>>> type(1/1.0)& ...

  9. 31.密码学知识-证书CA/PKI-8——2019年12月19日

    1. 证书 公钥证书(Public-Key Certificate,PKC)其实和驾照很相似,里面记有姓名.组织.邮箱地址等个人信息,以及属于此人的公钥, 并由认证机构(Certification A ...

  10. 如何用DNS+GeoIP+Nginx+Varnish做世界级的CDN

    如何用DNS+GeoIP+Nginx+Varnish做世界级的CDN     如何用BIND, GeoIP, Nginx, Varnish来创建你自己的高效的CDN网络?CDN,意思是Content ...