Bootstrap 网格系统(Grid System)实例1
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;
}
</style>
</head>
<body>
<div class="container">
<h2>Hello Bootstrap</h2>
<div class="row">
<div 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>
</div>
<div 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>
</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)实例1的更多相关文章
- 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)实例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 ...
随机推荐
- HDU1501【简单DP】
题意: 从a串和b串中顺序地取出是否能组成c串: 思路: dp[i][j] 代表从a串中取了i个,b串中取了j个的情况: #include <bits/stdc++.h> using na ...
- Unity Prefabs
通过上一期的学习,我们知道为了如何向场景中添加一个物体.问题来了,如果需要对这个立方体进行修改应该怎么做呢?那我们肯定就得修改这段代码,能不能将立方体本身从我们的开发中单独提出来呢?这就涉及到我们今天 ...
- PJzhang:最基本的正则表达式实例
猫宁!!! 参考链接: https://www.cnblogs.com/fozero/p/7868687.html http://tool.oschina.net/regex/# http://too ...
- Java 工程师面试题和笔试题整理（一）
根据自己之前收集的还有一部分自己面试的整理出来,希望能帮到面试的兄弟(2017). 海科融通 笔试题 1.有一个字符串,如果要在其中查找一个子串,都有哪些方式,写出你认为最好的一个. 2.写出线程都有 ...
- java基础第二篇
3.选择结构 a.if: 格式一: if(表达式1){ 表达式1为真才执行 } 格式二: if(表达式1){ 表达式1为真才执行 }else{ 表达式1位假才执行 } 格式三:判断工龄的范围,判断成绩 ...
- A.走方格
链接:https://ac.nowcoder.com/acm/contest/368/A 题意: 在一个n*n的方格中,你只能斜着走. 你还有一次上下左右走的机会 给你一个起点(sx,sy),和终点( ...
- 洛谷 P4137 Rmq Problem / mex
https://www.luogu.org/problemnew/show/P4137 只会log^2的带修主席树.. 看了题解,发现有高妙的一个log做法:权值线段树上,设数i对应的值ma[i]为数 ...
- linux分配文件文件夹所属用户及组
ls -l 可以查看当前目录文件.如:drwxr-xr-x 2 nsf users 1024 12-10 17:37 下载文件备份分别对应的是:文件属性 连接数 文件拥有者 所属群组 文件大小 文件修 ...
- 对shell的简单认识
shell是一个命令解释器: shell分为交互式shell和非交互式shell: 交互式shell就是命令行一问一答:非交互式shell是像shell文本那样,一次解析文本, 并未在命令行给我们作出 ...
- SpringBoot 2.x （12）：整合Elasticsearch
Elasticsearch:一个优秀的搜索引擎框架 搜索方面最基本的是SQL的like语句 进一步的有Lucene框架 后来有企业级的Solr框架 而Elasticsearch框架尤其适合于数据量特别 ...