<!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. NOIP2016普及组解题报告

    概述 \(NOIP2016\)普及组的前三题都比较简单,第四题也有很多的暴力分,相信参加了的各位\(OIer\)在\(2016\)年都取得了很好的成绩. 那么,我将会分析\(NOIP2016\)普及组 ...

  2. 2.17NOIP模拟赛(by hzwer) T1 小奇挖矿

    [题目背景] 小奇要开采一些矿物,它驾驶着一台带有钻头(初始能力值 w)的飞船,按既定 路线依次飞过喵星系的 n 个星球. [问题描述] 星球分为 2 类:资源型和维修型. 1. 资源型:含矿物质量 ...

  3. 寒假安卓app开发学习记录（6）

    今天把之前学过的内容复习了一遍,然后用了大概一个小时的时间看了看教学视频. 学到的主要内容是如何调试Android程序,以及Android的应用以及打包过程.   调试: 依次点击Run“-”Atta ...

  4. 哪款C语言编译器（IDE）适合初学者？

    这里我们把“编译器”和“IDE(集成开发环境)”当做一个概念,不再加以区分. C语言的集成开发环境有很多种,尤其是 Windows 下,多如牛毛,初学者往往不知道该如何选择,本节我们就针对 Windo ...

  5. django入门（二）MTV开发模式

    MTV开发模式,顾名思义,M是models,T是templates,V是view. 之前的教程没有牵扯到html,然后今天将告诉你如何转到自己做的静态页面 首先还是先创建一个app,python ma ...

  6. 普及C组第一题（8.9）

    2297. [noip普及组2(放到第一题)]棋盘 (好像重名了)(File IO): input:chess.in output:chess.out 题目描述 众所周知,国际象棋的棋盘是一个网格.国 ...

  7. PHP 操作oracle数据库，select，insert into ,delete，update等

    建完数据库,下面就是操作数据库啦 程序的根源无非是增删改查 首先最基础的查询 public function obtainduo(){ header("content-type:text/h ...

  8. 吴裕雄 python 机器学习——集成学习AdaBoost算法回归模型

    import numpy as np import matplotlib.pyplot as plt from sklearn import datasets,ensemble from sklear ...

  9. 4.万能的Map+模糊查询

    万能的Map 当数据或者属性很多的时候,可以选择性的单独改变密码或者用户名等等 UserMapper.java int updateUserByMap(Map<String,Object> ...

  10. 共有T个硬币，其中Z个正面，F个反面，分为两堆，要如何操作使得两堆中的正面硬币数目相等。

    类似题目如下(数值是可变化的) 你的面前有30个硬币,其中有10个正面朝上,20个反面朝上,混乱在一团. 要求:现在用厚布遮住你的眼睛.要你把30个硬币分成2团,每团正面朝上的硬币个数相等.问:你要怎 ...