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>
Bootstrap 网格系统(Grid System)实例5的更多相关文章
- 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)实例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 ...
随机推荐
- 微信API接口文档
传送门
- ADO学途 three day
1· 程序的根本----数据 一个程序是用来处理数据算法的具体表现,可以说没有数据,程序就没有意义.今天主 要分享在一个程序中数据的支持者SQL server的建立和使用.首先当然不可缺少SQL se ...
- JS中一个new到底做了哪些事情？
1.https://www.cnblogs.com/faith3/p/6209741.html 2.https://www.cnblogs.com/AaronNotes/p/6529492.html
- 序列化 jprotobuf
jprotobuf工作原理如下: 扫描类上的注解的信息,进行分析(与protobuf读取proto文件进行分析过程相似) 根据注解分析的结果,动态生成java代码进行protobuf序列化与反序列化的 ...
- monxin cms 任意文件删除漏洞
\program\diypage\receive\edit.php首先看到一个unlink($path);本来应该先看sql语句的,但知道是任意文件删除先跳过删除语句,看看$path怎么传入的倒推上去 ...
- 牛客寒假6-B.煤气灶
链接:https://ac.nowcoder.com/acm/contest/332/B 题意: 小j开始打工,准备赚钱买煤气灶. 第一天,小j的工资为n元,之后每天他的工资都比前一天多d元. 已知煤 ...
- Count on a tree II SPOJ - COT2 && bzoj1086 王室联邦 && bzoj2589
https://cn.vjudge.net/problem/SPOJ-COT2 这个是树上莫队模版啊.. 树上莫队有两种,第一种就是括号序莫队 设节点i在括号序中首次出现位置为pl[i] 那么路径(i ...
- HTML表格的基本结构标记
<table>标记 1.基本格式:<table 属性1="属性值1" 属性2="属性值2" ... ...>表格内容</table ...
- 复习线程——状态和几个Thread方法
一.线程的状态 (参考文章:https://blog.csdn.net/a58220655/article/details/76695142) 状态介绍 新建(new):处于该状态的时间很短暂.已被分 ...
- 开机启动+Linux发送邮件
需求:检测Linux上Tomcat是否允许,挂了的话给运维发送邮件通知 实现:编写脚本一直检测Tomcat进程是否存活,否则给运维发送邮件,脚本设置开机时自动启动 1.Linux发送邮件 vim /e ...