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的更多相关文章

  1. Bootstrap 网格系统(Grid System)实例5

    Bootstrap 网格系统(Grid System)实例5:手机,平板电脑,笔记本或台式电脑 <!DOCTYPE html><html><head><met ...

  2. Bootstrap 网格系统(Grid System)实例3

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  3. Bootstrap 网格系统(Grid System)实例1

    Bootstrap 网格系统(Grid System)实例:堆叠水平 <!DOCTYPE html><html><head><meta http-equiv= ...

  4. Bootstrap 网格系统(Grid System)实例2

    Bootstrap 网格系统(Grid System):堆叠水平,两种样式 <!DOCTYPE html><html><head><meta http-equ ...

  5. Bootstrap 网格系统(Grid System)

    Bootstrap 网格系统(Grid System) Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 什么是 ...

  6. [转载]Understanding the Bootstrap 3 Grid System

    https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the gr ...

  7. Bootstrap 网格系统（Grid System）的工作原理 - 媒体查询

    媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...

  8. BootStrap入门教程 (一) ：手脚架Scaffolding（全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts)）

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  9. BootStrap -- Grid System

    <script src="jquery.1.9.js"></script> <script src="js/bootstrap.min.js ...

随机推荐

  1. Codeforces 61B【怪在读题】

    搞不懂为什么DFS的写法崩了,然后乱暴力,因为题意不是很懂... 主要还是读题吧(很烦 #include <bits/stdc++.h> using namespace std; type ...

  2. bzoj 2738: 矩阵乘法【整体二分+树状数组】

    脑子一抽开始写主席树,敲了一会发现不对-- 整体二分,用二维树状数组维护值为当前区间的格子个数,然后根据k的大小和当前询问的子矩阵里的值和k的大小关系来决定这个询问放在哪一部分向下递归 #includ ...

  3. Nginx实现负载均衡（nginx + tomcat应用分布式）

    一.       工具   nginx-1.8.0 apache-tomcat-6.0.33 二.    目标   实现高性能负载均衡的Tomcat集群: 三.    步骤   1.首先下载Nginx ...

  4. vmware vSAN 入门

    参考:https://docs.vmware.com/cn/VMware-vSphere/6.5/com.vmware.vsphere.virtualsan.doc/GUID-18F531E9-FF0 ...

  5. 结束线程方法2 Java提供的中断机制

    package com.mozq.thread.interrupt; /** * 注意:调用interrupt()方法,并不会结束线程. * 结束线程的语义:需要我们自己使用3个中断方法构建. * * ...

  6. [题解]（约数）BZOJ_1053_反素数

    三条引理:1.1~N中最大风反质数,就是1~N中约数个数最多的最小的一个 比较显然,是应该看出来的一条 2.1~N中任何数的不同因子都不会超过10个,且所有质因子的指数之和不超过30: 2*3*5*7 ...

  7. [題解]（單調隊列dp）【2016noip福建夏令營】探險

    P1917 -- 探险 时间限制:1000MS      内存限制:131072KB 题目描述(explore.cpp) π+e去遗迹探险,遗迹里有 N 个宝箱,有的装满了珠宝,有的装着废品. π+e ...

  8. 洛谷 P1053 篝火晚会

    https://www.luogu.org/problemnew/show/P1053 错误记录:判-1的时候出了些问题(比如只判了图是否连通):数组没清空 #include<cstdio> ...

  9. eclipse打开jsp的方式怎么设置成默认

    https://jingyan.baidu.com/article/4ae03de34137be3eff9e6b93.html

  10. 湖南省2016省赛题。1809: Parenthesis 线段树

    http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1809 给定一串平衡的序列,要求交换两个位置之后,问其是否还平衡. 首先要注意到交换的是两个位置,这 ...