<!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. 《gPRC使用protobuf构建微服务》阅读笔记

    首先我需要去了解一些概念,根据百度百科了解到: l  微服务架构:微服务架构是一项在云中部署应用和服务的新技术.微服务可以在“自己的程序”中运行,并通过“轻量级设备与HTTP型API进行沟通”. l  ...

  2. 粪发涂墙-redis1

    redis 核心就是 如果我的数据全都在内存里,我单线程的去操作 就是效率最高的,为什么呢,因为多线程的本质就是 CPU 模拟出来多个线程的情况,这种模拟出来的情况就有一个代价,就是上下文的切换, 对 ...

  3. String - 字符串分割操作

    如果我想将一个字符串按照每8位一组分为若干个块,然后存储在一个byte[ ]数组中,我首先需要确定这个byte数组的长度,但由于我无法确定这个字符串的长度是否可以被8整除,所以无法直接判断,因此需要对 ...

  4. 解决vim选中文字不能复制的问题

    转载自本人独立博客:https://liushiming.cn/2020/01/18/vim-copy-issue-in-iterm2/ 概述 最近发现在iterm2中打开vim,用鼠标选中文字,并用 ...

  5. 攻防世界 robots题

    来自攻防世界 robots [原理] robots.txt是搜索引擎中访问网站的时候要查看的第一个文件.当一个搜索蜘蛛访问一个站点时,它会首先检查该站点根目录下是否存在robots.txt,如果存在, ...

  6. shell脚本编程学习笔记（三）编写邮件报警脚本

    一.shell编写邮件报警脚本 1.POSTFIX邮件服务器准备 a.首先卸载服务器上自带的sendmail rpm -qa sendmail* //查看安装的sendmail rpm -e send ...

  7. 一个汇编小demo

    一个小demo: #include<stdio.h> void main(){ ; char *str="i=%d\n"; printf("begin\n&q ...

  8. Abaqus中的单位制

    量纲 SI SI/mm US/ft US/inct 长度 m mm ft in 载荷 N N lbf lbf 质量 kg kg3 slug lbfs2/in 时间 s s s s 量纲 SI SI/m ...

  9. IIS-代理

    http://192.168.11.3:8083/java   访问  http://192.168.11.3:8089 http://192.168.11.3:8083/?id=1 访问http:/ ...

  10. 【Python下进程同步之互斥锁、信号量、事件机制】

    " 一.锁机制:  multiprocess.Lock 上篇博客中,我们千方百计实现了程序的异步,让多个任务同时在几个进程中并发处理,但它们之间的运行没有顺序.尽管并发编程让我们能更加充分的 ...