<!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. chomp/undef/标量 --Perl 入门第二章

    1.chomp 用途:去掉字符串 末尾的换行符 $text="a line of text \n" chomp($text) #去除行末的换行符 chomp()  --本质上是一个 ...

  2. weinre 真机调试

    1.在任意文件夹 安装weinre cnpm -g install weinre 2.启动 weinre --httpPort 8009 --boundHost -all- 3.在你的页面中加入 本机 ...

  3. 用Python给头像加上圣诞帽或圣诞老人小徽章

    随着圣诞的到来,想给给自己的头像加上一顶圣诞帽.如果不是头像,就加一个圣诞老人陪伴. 用Python给头像加上圣诞帽,看了下大概也都是来自2017年大神的文章: https://zhuanlan.zh ...

  4. layui数据表格固定头部和第一列、colspan合并列

    刚看到原型图的时候,纳尼?不是跟我开玩笑吧,小女子资历尚浅,还真没做过像这样的功能,然后就是各种找度娘,可是都没有找到合适的,很多都是行合并,真的是头疼呀!再纠结是用VUE实现还是用layui实现好, ...

  5. Spring Boot 文件上传简易教程

    上传文件是我们日常使用最为广泛的功能之一,比如App端上传头像.本章演示如何从客户端上传到 Spring Boot 开发的 Api中. 本项目源码 github 下载 1 新建 Spring Boot ...

  6. hadoop中block副本的放置策略

    下面的这种是针对于塔式服务器的副本的放置策略

  7. 1、MyBatis框架底层初涉

    1.拜年 哈哈,现在是过年了,祝大家新年好. 本来大过年的是不打算碰电脑的,(抢票除外,三疯同学现在还没抢到票,然后突然又延长假期了).现在疫情严重,被堵家里不能出去了.不能为国家做贡献,但是起码不能 ...

  8. 移动端，ajax 动态加载的元素，为动态添加的一系列同个类名的元素添加点击事件

    背景:一个列表页,有一系列同类名的元素,需要为每一个动态添加的列表项添加事件: 点击选择下图中不同的文档类型,再通过 ajax 动态加载不同的文档. 使用过的方法: 1.通知 jquery 的 $(s ...

  9. dapper基本操作

    https://www.cnblogs.com/vichin/p/9289969.html

  10. MS17_010漏洞攻击Windows7

    攻击主机系统:Kali Linux 2018 目标主机系统:Windows7 x64 1.攻击主机启动Metasploit: msfconsole 2.查找MS17_010漏洞相关的信息: searc ...