Bootstrap 网格系统(Grid System)实例4
Bootstrap 网格系统(Grid System)实例4：中型和大型设备
<!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, .col-lg-4,.col-lg-8 {
background-color:#e5eecc;
box-shadow:inset 1px -1px 1px #aaaaaa,inset -1px 1px 1px #aaaaaa;
}
</style>
</head>
<body>
<div class="container">
<h2>Hello Bootstrap</h2>
<div class="row">
<div class="col-md-6 col-lg-4">
<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-6 col-lg-8">
<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>
<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)实例4的更多相关文章
- Bootstrap 网格系统(Grid System)实例5
Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...
- 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)实例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 ...
随机推荐
- C#箴言：定义常量的两种方法
在C#中定义常量的方式有两种, 一种叫做静态常量(Compile-time constant),另一种叫做动态常量(Runtime constant). 前者用"const"来定义 ...
- 2016 Noip提高组
2557. [NOIP2016]天天爱跑步 ★★☆ 输入文件:runninga.in 输出文件:runninga.out 简单对比时间限制:2 s 内存限制:512 MB [题目描述] ...
- ADO学途 four day 数据库左右连接
数据库的多表操作 数据库用于存放用户数据,用户数据库的数据又会有不同表来存放不同类型的数据,这这是就会产生多 张表来满足需求.列如,部门表有市场部,技术部,行政部等.,子表就有员工具体信息表用来存放员 ...
- 【SpringCloud构建微服务系列】分布式链路跟踪Spring Cloud Sleuth
一.背景 随着业务的发展,系统规模越来越大,各微服务直接的调用关系也变得越来越复杂.通常一个由客户端发起的请求在后端系统中会经过多个不同的微服务调用协同产生最后的请求结果,几乎每一个前端请求都会形成一 ...
- shell学习（3）- grep
常用选项 -E :开启扩展(Extend)的正则表达式. -i :忽略大小写(ignore case). -v :反过来(invert), 显示不包含匹配文本的所有行. -V 或 --vers ...
- PostgreSQL-8-数据合并
-- 1.JOIN与UNION的区别详解 CREATE TABLE t1(id int,value1 text); ,,,'c'); -- 创建表格t1 CREATE TABLE t2(id int, ...
- [题解]区间dp_luogu_P3147 262144
小数据版本P3146,可以区间dp, 性质:对于一个区间如果能合并成一个数,那么这个数是确定的 理解:把每个数看做 2^x 的形式,那么如果合并:2^x + 2^x =2^(x+1) 所以 f [ i ...
- 选择器 nth-child和 nth-of-type的区别
<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li&g ...
- 用javascript编写一个简单的随机验证码程序
简单模拟网页的随机数字验证码,效果图如下: html代码: <div id="content"> <div class="left"> ...
- [已读]你不知道的JavaScript（上卷）
就在前幾天,我在看完第一部分的時候,說它在我心中要超過蝴蝶書了,好吧,現在要收回這句話.第二部分的內容著重在ecma5,6對象的新特性的介紹,深度上就一般啦,沒什麼收穫.總體來說,這本書詞法作用域,作 ...