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 ...
随机推荐
- Weekly Contest 78-------->809. Expressive Words (stack)
Sometimes people repeat letters to represent extra feeling, such as "hello" -> "he ...
- JAG Practice Contest for ACM-ICPC Asia Regional 2016 C题【贪心】
camp给出的题解: 题解:贪心,先算出最小需要的长度.然后从左到右依次确定每一位.复杂度O(n)O(n) 长度为 2n2n 的串可以构造出需要 [0,1+3+...+2n-1][0,1+3+...+ ...
- Codevs 1018 单词接龙
1018 单词接龙 2000年NOIP全国联赛普及组NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描 ...
- [Xcode 实际操作]八、网络与多线程-(10)使用异步Get方式查询GitHub数据
目录:[Swift]Xcode实际操作 本文将演示如何通过Get请求方式,异步获取GitHub资源的详细信息. 异步请求与同步请求相比,不会阻塞程序的主线程,而会建立一个新的线程. 在项目导航区,打开 ...
- C#字体字号的改变
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- 网络请求方法（SDK封装可以替换afn）
//个人觉得 sdk开发时候 最好不要用第三方 最好可以用最原始的方法 替换 此处仅做sdk封装使用 留存+(void)GET:(NSString *)urlStr params:(NSDiction ...
- Linux (三)
chmod :用来改变文件或目录的访问权限 语法格式:chmod [参数选项] [mode][文件或者目录] 参数选项: -v :显示权限变更的详细信息 -R :对当前目录下的所有文件以及子目录进行相 ...
- 正则表达式匹配URL——给URL地址加上<a> 链接
<?php function replace_url ($content) { if (empty($content)) return; //给URL地址加上 <a> 链接 $pre ...
- QQ免费企业邮箱申请配置
对于小企业来说,免费的企业邮箱是不错的选择,省去服务器费用和人员维护费用.在这里说一下,qq的免费企业邮箱.如果想搭建自己的企业邮局,请参考:centos extmail postfix nginx ...
- hdu4832Chess(dp)
链接 这题第一想法是矩阵,不过范围太大了,然后就没有思路了.. 之后看到群里的解法,行和列可以分着走,两者是互不影响的,这样就把二维转换成了一维,直接dp求出就可以了. 然后再组合相乘一下. #inc ...