<!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. FileOutputStream，BufferedOutputStream，FileWriter 效率比较

    测试代码: /** * 写文件 * FileOutputStream, BufferedOutputStream, FileWriter * 三个流 效率比较 */ @Test public void ...

  2. HttpServer性能比较

    在自己的本子上随便测了下几款HttpServer,环境信息就不贴出来了,主要是比对下差距. 测试内容是输出 text/plain 的 hello, world. 先说结论:Netty > Joo ...

  3. 接入HikariCP遇到问题

    老Tomcat项目在接入HikariCP时遇到报错: Caused by: java.lang.AbstractMethodError: com.mysql.jdbc.Connection.isVal ...

  4. JS-禁用浏览器前进后退

    使用jQuery: <script type="text/javascript" language="javascript"> $(document ...

  5. 初始css一

    初始CSS 一.form表单补充 form表单关键性的属性补充 form表单 关键性的属性 action 控制的是数据的提交路径 1.不写 默认是朝着当前页面所在的地址提交 2.全路径 3.后缀(/i ...

  6. 不会PPT配色没关系，有这些配色网站，也能让你的PPT配色美到极致

    很多小伙伴在做PPT的时候,都会被PPT的配色难倒.看到各种非常好看的颜色总是想要将其用在自己的PPT中,可是却发现,颜色和颜色之间完全不搭,自己的PPT也变得丑到不像样. 别担心,今天将分享几个非常 ...

  7. hackinglab 种族歧视

    首先打开题目 发现是禁止访问的然后打开后台 发现后台也没有什么有用的信息所以用bp抓包 然后修改一下国家语言

  8. EditPlus 注册码在线生成

    虽然editplus现在不常用,但是它轻便,我还是很喜欢的,推荐一个注册码生成器,真是好好用 http://www.jb51.net/tools/editplus/ 点击链接输入自己想要的用户名,就能 ...

  9. spark streaming读取kakfka数据手动维护offset

    在spark streaming读取kafka的数据中,spark streaming提供了两个接口读取kafka中的数据,分别是KafkaUtils.createDstream,KafkaUtils ...

  10. Jmeter_选项_函数助手_RandomString的用法

    1.用处:测试账户注册可以通过随机生成数实现,而不需要Excel手动输入, 缺点:随机生成数可能会重复 优点:不需要使用CSV config 或者excel ,txt格式 2.举例:之前我们通过CSV ...