Bootstrap 网格系统(Grid System)实例3
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-3,.col-md-9 {
background-color:#dedef8;
box-shadow:inset 1px -1px 1px #444,inset -1px 1px 1px #444;
}
.col-md-7,.col-md-5 {
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-7">
<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-5">
<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)实例3的更多相关文章
- 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)实例1
Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...
- Bootstrap 网格系统(Grid System)实例2
Bootstrap 网格系统(Grid System):堆叠水平,两种样式 <!DOCTYPE html><html><head><meta http-equ ...
- 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 ...
随机推荐
- 51nod 1278【贪心】
主要这道题没有包含的情况,所以直接搞个左端,然后对于每个二分求一下>right的最近的位置j,那么ans就会增加 j 以后的: #include <cstdio> #include ...
- dosbox让DOSBox启动后自动执行命令——自动挂载
学习汇编时. 每次启动DOSBox后,都要挂载.转盘符,于是有一个骚套路. 找到这个:bat文件 用记事本就可以编辑. 拉到最下面,找到[autoexec]部分,补充命令如下: mount c f: ...
- 51Nod 1272 最大距离 (栈或贪心)
#include <cstdio> #include <queue> #include <cstring> #include <iostream> #i ...
- OSPF-1-OSPF的数据库交换（2）
2.Hello过程: (1)在同一子网中发现其他运行OSPF的路由器 所有启用了OSPF的接口,都会监听发往224.0.0.5的组播Hello消息,这是表示所有OSPF路由器的组播地址.Hello包使 ...
- [题解]（区间质数筛）POJ_2689 Prime Distance
区间筛素数:先筛出1~sqrt(R)的素数,然后对于每个询问只要用这些素数筛掉区间内的合数即可. 几个细节:1.特判和1有关的一些情况 2.每次减去L偏移量,数组只开区间大小 3.POJ无法使用万能头 ...
- [软件工程基础]2017.10.30 第三次 Scrum 会议
决议 游心与李煦通沟通生成报告脚本问题,并调试相应代码 李煦通部署服务器,并做一定安全检查 石奇川设计实验流程和题库前端页面 王嘉睿爵测试网站基本流程,提出关于用户体验方面的建议 刘子渊阅读代码,为机 ...
- 手动释放Linux内存
查看内存: [root@iZ9dp52tlpqyihuisujjswZ bin]# free -h total used free shared buff/cache available Mem: 3 ...
- 语义分割丨DeepLab系列总结「v1、v2、v3、v3+」
花了点时间梳理了一下DeepLab系列的工作,主要关注每篇工作的背景和贡献,理清它们之间的联系,而实验和部分细节并没有过多介绍,请见谅. DeepLabv1 Semantic image segmen ...
- 使用SpringCloud-Netflix
目录 SpringCloud-Netflix 配置统一依赖管理 创建服务注册中心 创建服务提供者 创建服务消费者 SpringCloud-Netflix Spring Cloud 是一个相对比较新的微 ...
- 需求管理是CMM可重复级中的6个关键过程域之一，其主要目标是__________。A．客观地验证需求管理活动
需求管理是CMM可重复级中的6个关键过程域之一,其主要目标是__________.A．客观地验证需求管理活动 需求管理是CMM可重复级中的6个关键过程域之一,其主要目标是_________ ...