Bootstrap 网格系统(Grid System)实例2
Bootstrap 网格系统(Grid System):堆叠水平，两种样式
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练作品: 堆叠水平</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<style>
.col-md-6 {
background-color:#dedef8;
box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;
}
.col-md-3,.col-md-9 {
background-color:#dedef8;
box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;
}
</style>
</head>
<body>
<div class="container">
<h2>Hello Bootstrap</h2>
<div class="row">
<div class="col-md-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</div>
<div class="col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</div>
</div>
</div>
<section class="container">
<h2>Hello Bootstrap</h2>
<aside class="row">
<article class="col-md-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</article>
<article class="col-md-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</article>
</aside>
</section>
<script src="Css/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap 网格系统(Grid System)实例2的更多相关文章
- Bootstrap 网格系统(Grid System)实例5
Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...
- Bootstrap 网格系统(Grid System)实例4
Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...
- Bootstrap 网格系统(Grid System)实例3
Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...
- Bootstrap 网格系统(Grid System)实例1
Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...
- Bootstrap 网格系统(Grid System)
Bootstrap 网格系统(Grid System) Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是 ...
- [转载]Understanding the Bootstrap 3 Grid System
https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the gr ...
- Bootstrap 网格系统（Grid System）的工作原理 - 媒体查询
媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...
- BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- BootStrap -- Grid System
<script src="jquery.1.9.js"></script> <script src="js/bootstrap.min.js ...
随机推荐
- POJ3692【二分匹配】
题意: 有男生女生,男生都认识双方,女生都认识双方,给出一些男女关系,问最大拿多少个人,使得所有人都认识双方. 思路: 原图最大团=总结点数-[[补图(补图为二分图)]的最大独立集=最大完全子图的顶点 ...
- [Xcode 实际操作]八、网络与多线程-(14)使用网址会话对象URLSession将地理坐标转换为地名
目录:[Swift]Xcode实际操作 本文将演示如果通过网址会话对象,将地理坐标转换为地名. 网址会话对象URLSession具有在后台上传和下载.暂停和恢复网络操作.丰富的代理模式等优点. 在项目 ...
- C 语言实例 - 计算字符串长度
C 语言实例 - 计算字符串长度 C 语言实例 C 语言实例 计算字符串长度. 实例 - 使用 strlen() #include <stdio.h> #include <strin ...
- VLAN-2-私有VLAN
好的设计方式通常要求工程师为每个vlan使用一个ip子网.然而在有些情况下,将设备分割到许多小VLAN中以增加安全性的需求,与节省可用子网的目标相互冲突.通过使用私有vlan,交换机能够分 ...
- ERROR: Could not connect to lockdownd, error code -19 -20
执行命令行 brew install libimobiledevice --HEAD
- python 基础(十一) pickle 序列化
一.pickle序列化的操作 使用说明:可以将数据 转换成2进制 写入到文件中 或者之间返回 做到将数据原样写入 原样取出 import pickle (1) dump 写入文件中 pickle.du ...
- Day2课后作业：三级菜单简单版
menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, '谷歌':{} }, '中关村':{ '爱奇艺':{}, '汽车之家':{}, 'youku':{ ...
- linux下curl get方法传递参数
例如 url 为 http://mywebsite.com/index.php?a=1&b=2&c=3 web形式下访问url地址,使用$_GET是可以获取到所有的参数 然而在linu ...
- 098 Validate Binary Search Tree 验证二叉搜索树
给定一个二叉树,判断其是否是一个有效的二叉搜索树.一个二叉搜索树有如下定义: 左子树只包含小于当前节点的数. 右子树只包含大于当前节点的数. 所有子树自身必须也是二叉搜索树.示例 1 ...
- MDX之Avg函数使用
日均值是比较常见的指标,本文对 MDX 计算日均值做一个总结 MDX 计算日均值,表达式一 WITH MEMBER Measures.[日均值] AS Avg( Descendants( ...