<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8">

   <title>Bootstrap 实例 - 堆叠的水平</title>

   <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

   <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

    <h1>Hello, world!</h1>

    <div class="row">

        <div class="col-md-6"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <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" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium.

            </p>

            <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

            consectetur, adipisci velit, sed quia non numquam eius modi

            tempora incidunt ut labore et dolore magnam aliquam quaerat

            voluptatem.

            </p>

        </div>

    </div>

</div>

</body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：堆叠的水平的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：响应式的列重置

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：手机、平板电脑、台式电脑

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 手机.平板电脑.台式电脑</title&g ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：中型和大型设备

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 中型和大型设备</title> &l ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：列排序

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：嵌套列

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：偏移列

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：引用（Blockquote）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：地址（Address）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：缩写

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 缩写</title> <lin ...

随机推荐

  1. 【转】git rebase详解

    git合并代码方式主要有两种方式,分别为:1.merge处理,这是大家比较能理解的方式.2.rebase处理,中文此处翻译为衍合过程. git rebase操作讲解例子: cd /usr/local/ ...

  2. mysql 父子表 注意事项

    今天遇到一个问题,父子表关联查询时总是多出几条数据,后来排查是父子关系的字段 类型不一致导致的

  3. 并发之ATOMIC原子操作--Unsafe解析（三）

    Atomic 类的原子操作是依赖java中的魔法类sun.misc.Unsafe来实现的,而这个类为我们提供了访问底层的机制,这种机制仅供java核心类库使用,而不应该被普通用户使用. 获取Unsaf ...

  4. 每天进步一点点------Xilinx FPGA开发工具 EDK SDK术语

    XPS:Xilinx Platform Studio,平台工作室.用于嵌入式处理器硬件部分的开发. SDK:Software Development Kit,软件开发套件.基于Eclipse平台,支持 ...

  5. try catch 语句中有return 的各类情况

    在牛客上做java题时遇到过多到关于try catch语句的问题,看了很多答案解析,在这里记录一下. 首先给出一道题目: 下面代码的运行结果为? A.catch语句块 和是43 B.编译异常 C.fi ...

  6. 046_使用Scanner获得键盘输入 047_控制语句介绍 048_控制语句_if单选择结构 049_ifelse双选择结构 050_ifelseifelse多选择结构

    046_使用Scanner获得键盘输入 package test_package;import java.util.Scanner;/** * 测试获得键盘输入 * @author * */publi ...

  7. base64加/解密算法C++实现

    base64编码原理:维基百科 - Base64 其实编码规则很简单,将字符串按每三个字符组成一组,因为每个字符的 ascii 码对应 0~127 之间(显然,不考虑其他字符集编码),即每个字符的二进 ...

  8. SpringBoot 开发的那些小趣事儿

    经过这次在公司实习中获取到的经历,我发现确实有时候书本上的知识发挥的作用微乎其微,好像是被问题打了太极拳一样,你明明想去攻克这个地方,他却给你报了其他地方的错误. 平常的一些小项目根本就不能匹配到企业 ...

  9. JS高级---工厂模式创建对象和自定义构造函数创建对象的区别

    创建对象:工厂模式和自定义构造函数的区别 共同点: 都是函数, 都可以创建对象, 都可以传入参数   区别:   工厂模式: 函数名是小写 有new, 有返回值 new之后的对象是当前的对象 直接调用 ...

  10. HDU2444 The Accomodation of Students(二分图最大匹配）

    有n个关系,他们之间某些人相互认识.这样的人有m对.你需要把人分成2组,使得每组人内部之间是相互不认识的.如果可以,就可以安排他们住宿了.安排住宿时,住在一个房间的两个人应该相互认识.最多的能有多少个 ...