<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8">

   <title>Bootstrap 实例 - 嵌套列</title>

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

   <script src="https://cdn.staticfile.org/jquery/2.1.1/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-3" style="background-color: #dedef8;box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <h4>第一列</h4>

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

      </div>

      <div class="col-md-9" style="background-color: #dedef8;box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <h4>第二列 - 分为四个盒子</h4>

         <div class="row">

            <div class="col-md-6" style="background-color: #B18904;

               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

               <p>Consectetur art party Tonx culpa semiotics. Pinterest

                  assumenda minim organic quis.

               </p>

            </div>

            <div class="col-md-6" style="background-color: #B18904;

               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

               <p> 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>

            </div>

         </div>

         <div class="row">

            <div class="col-md-6" style="background-color: #B18904;

               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

               <p>quis nostrud exercitation ullamco laboris nisi ut

                  aliquip ex ea commodo consequat.

               </p>

            </div>

            <div class="col-md-6" style="background-color: #B18904;

               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.</p>

            </div>

         </div>

      </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> <meta charset="utf-8"> <title> ...

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

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

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

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

  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. Maven - skiptest

    1. 概述 maven install 中尝试跳过 单元测试 2. 背景 从别处找来的工程 改了改发现测试过不了 编译都过不了 但又要着急继续调整 就是懒 这种事本来不提倡, 但是生产里数不胜数 Ma ...

  2. 每天进步一点点------SOPC TIMER (一)

    寄存器图 可以通过操作以下的寄存器来实现对timer(定时器)内核的操作(仅描述32位计数器) 状态寄存器: TO(timeout) :计数器计数到0时,该位置1,之后TO位的值会保持,直到手动清零, ...

  3. docker-compose介绍及部署LNMP

    一.简介 Compose是用于定义和运行多容器Docker应用程序的工具,是docker的服务编排工具,主要应用于构建基于Docker的复杂应用,compose通过一个配置文件来管理多个docker容 ...

  4. VS2017编译错误：#error: Building MFC application with /MD[d] (CRT dll version) requires MFC shared dll version

    VS2017编译错误:#error: Building MFC application with /MD[d] (CRT dll version) requires MFC shared dll ve ...

  5. js将后台传入得时间格式化

    //格式化时间函数Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月 ...

  6. js遍历传参给html

    <p id="subp" hidden><button id= "upsub"shiro:hasPermission="sys:me ...

  7. Groovy脚本-通用SQL开关

    备注:使用Groovy语言进行编写,看不懂的同学请先了解Groovy脚本. Groovy学习地址:https://www.cnblogs.com/tiechui2015/p/10828457.html ...

  8. JVM系列（四）之GC调优

    JVM内存参数调优 为什么要GC调优? 或者说的更确切一些,对于基于Java的服务,是否有必要优化GC?应该说,对于所有的基于Java的服务,并不总是需要进行GC优化,但当你的系统时常报了内存溢出或者 ...

  9. IDEA 导出可执行jar包【转载】

    1,在项目上鼠标右键 --> Open Module Settings,或者[shift+ctrl+alt+s] 2, Artifacts --> + --> JAR --> ...

  10. jq 常用语句

    //jq post 请求 $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){ }); // jq get ...