Bootstrap 网格系统(Grid System)实例5
Bootstrap 网格系统(Grid System)实例5：手机，平板电脑，笔记本或台式电脑
<!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 href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.col-sm-3, .col-sm-9, .col-md-6, .col-lg-4, .col-lg-8 {
background-color:#e5eecc;
box-shadow:inset 1px -1px 1px #c3c3c3,inset -1px 1px 1px #c3c3c3;
}
</style>
</head>
<body>
<div class="container">
<h2>Hello Bootstrap</h2>
<div class="row">
<div class="col-sm-3 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-sm-9 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>
最新文章
- logistic regression与SVM
- http_build_query 的一个问题
- 学习笔记之vector向量容器
- 【转】Web前端浏览器兼容初探
- andriod GridView
- POJ 1904 King's Quest 强连通分量+二分图增广判定
- [Javascript] Advanced Function Scope
- 自动化运维工具Ansible详细部署
- BeautifulSoup 抓取网站url
- Kitty猫基因编码
- Console 口配置 Telnet 登录方式典型配置指导
- 前端dom元素的操作优化建议
- activiti源码编译
- SpringBoot(3) 文件上传和访问
- 版本管理——git
- padStart()方法,padEnd()方法
- mac 安装 RabbitMQ
- js replace replaceAll
- 洛谷P5280 [ZJOI2019]线段树（线段树）
- Mac下使用tree命令