测开之路一百一十三:bootstrap媒体对象
实现效果,左边是图片或者其他媒体,右边是对应的描述
引入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媒体对象的更多相关文章
- 测开之路一百一十二:bootstrap按钮
bootstrap按钮 引入bootstrap和jquery 普通按钮和bootstrap风格按钮 调整大小 块级按钮 禁用按钮 disabled 按钮分组 分页按钮
- 测开之路一百一十一:bootstrap表单
bootstrap表单 引入bootstrap和jquery 默认表单 垂直表单 表单属性绑定:for属性,当for的属性和id的属性相同时,单击for标签,光标自动跳到相同属性的输入框 复选框 水平 ...
- 测开之路一百一十:bootstrap图片
bootstrap图片 引入bootstrap 原版的图片 bootstrap处理后的: 圆角.圆形.缩略图 自适应窗口
- 测开之路一百五十三:ajax之load、get、ajax在项目中的体现
在查询的时候是使用ajax进行请求的 目录结构 personal.models from datetime import datetimefrom flask_sqlalchemy import SQ ...
- 测开之路一百四十三:ORM框架之SQLAlchemy模型及表创建
基于前一篇内容,可以使用模型的结构 目录结构 main,入口层 from flask import Flaskfrom flask_sqlalchemy import SQLAlchemy app = ...
- 测开之路一百三十三:实现sql函数封装
连接数据库的频率很高,所以把数据库操作封装起来 函数封装: def make_dicts(cursor, row): """ 将游标获取的Tuple根据数据库列表转换为d ...
- 测开之路一百二十三:快速搭建python虚拟环境
前提:已装好python3.4+且环境可正常运行 一:手动搭建: 准备好一个工作目录 管理员运行cmd,进入到准备的目录里面 执行命令:python -m venv 虚拟环境名 激活虚拟环境(在ven ...
- 详解Bootstrap媒体对象
在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架中其对应的版本文件如下: LESS: media.l ...
- Bootstrap媒体对象
前面的话 在Web页面或者说移动页面制作中,常常看到图文混排效果,图片居左(或居右),内容居右(或居左)排列.常常把这样的效果称为媒体对象.可以说它是一种抽象的样式,可以用来构建不同类型的组件.本文将 ...
随机推荐
- element ui 选择期 传对象
<template> <el-select value-key="label" v-model="value" placeholder=&qu ...
- JavaScript设计模式 样例二 —— 策略模式
策略模式(Strategy Pattern): 定义:定义了一族算法: 封装了每个算法: 这族的算法可互换代替. 目的:将算法的使用与算法的实现分离开来. 场景:可用来消除大量的条件分支语句. 例:J ...
- C#基础知识之Ref Out Params 4种类型的参数
一.按值传递参数 值参数是通过将实参的值复制到形参,来实现按值传递到方法,也就是我们通常说的按值传递. 方法被调用时,CLR做如下操作: 1.在托管栈中为形参分配空间: 2.将实参的值复制到形参. 这 ...
- linux 时区问题
1.java项目发现 服务器时间不正确,修改了服务器时间之后依然没解决. 2.java虚拟机的时区也需要设置:
- 【04】Python 深拷贝浅拷贝 函数 递归 集合
1 深拷贝浅拷贝 1.1 a==b与a is b的区别 a == b 比较两个对象的内容是否相等(可以是不同内存空间) a is b 比较a与b是否指向同一个内存地址,也就是a与b的id是否相 ...
- 关于win7虚拟机的安装
VMware 安装以及秘钥 win7的光盘文件
- elementui多个文件上传问题
我认为绑定一个值 然后把值改变不同的名字即可
- Codecombat 游戏攻略(计算机科学三)
第二关 赋值运算符-=字符串拼串循环语句while // 你可以把字符串连起来,或者把数字连接到字符串. // 一起唱歌,使用字符串连接: // X potions of health on the ...
- RPA走专有云还是公共云?阿里云RPA公共云给出了这样几组数据…
自从近年国外UIPATH.AUTOMATION ANYWHERE.BLUE PRISM等RPA企业的崛起,Robotic Process Automation(RPA)走进了人们视野.它以节省成本.提 ...
- luogu P1217 [USACO1.5]回文质数 Prime Palindromes x
P1217 [USACO1.5]回文质数 Prime Palindromes 题目描述 因为151既是一个质数又是一个回文数(从左到右和从右到左是看一样的),所以 151 是回文质数. 写一个程序来找 ...