<!DOCTYPE html>

<html>

<head>

   <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-sm-3 col-md-6 col-lg-8"

         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-sm-9 col-md-6 col-lg-4"

         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> &l ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：堆叠的水平

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  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. [lua]紫猫lua教程-命令宝典-L1-01-10. 自定义函数

    L1[function]01. 定义与调用函数 函数的定义 和概念 没什么可说的 lua的函数声明和调用是有先后顺序的  先声明后调用 函数就是变量的一种 所以可以自由的把函数在变量间相互赋值 不过注 ...

  2. MySQL对大小写敏感吗

    见字如面,见标题知内容.你有遇到过因为MYSQL对大小写敏感而被坑的体验吗? 之前看过阿里巴巴Java开发手册,在MySql建表规约里有看到: [强制]表名.字段名必须使用小写字母或数字 , 禁止出现 ...

  3. python+selenium：浏览器webdriver操作(0)

    1.浏览器最大化 启动的浏览器不是全屏的,这样不会影响脚本的执行,但是有时候会影响我们“观看”脚本的执行. #coding=utf-8 from selenium import webdriver i ...

  4. 安装ipython[win/linux]

    首先以win7  64位系统, python2.7.9为例,linux见底部 1.下载材料http://files.cnblogs.com/files/smileyes/ipython-win64.z ...

  5. Git的基本使用 -- 创建本地仓库

    下载安装 Git-2.25.0-64-bit .exe 查看是否安装成功 git --version 创建本地仓库 创建一个文件夹用于存放项目文件 在创建好的文件中右键选择 Git Bash Here ...

  6. VS2017编写c/c++汇编函数并调用

    首先在VS里面创建个空项目,然后添加汇编文件 .asm,    右键asm文件属性  --- 常规,改成下图的设置  , 从生成中排除改为否, 项类型改为自定义生成工具 然后点确定. 再次右键asm文 ...

  7. 【Python】第一个程序---Helloworld！

    对于大多数程序语言,第一个入门编程代码便是"Hello World!",以下代码为使用Python输出"Hello World!": #!/usr/bin/py ...

  8. 【Vue实例生命周期】

    目录 实例创建之前执行--beforeCreate 实例创建之后执行--created 挂载之前执行--beforeMount 挂载之后执行--mounted 数据更新之前执行--beforeUpda ...

  9. mysql开启远程访问及相关权限控制

    开启mysql远程访问: 授予用户user 密码 passwd 所有权限 所有主机IP可访问 授权语句:Grant <权限> on 表名[(列名)] to 用户 With grant op ...

  10. linux日常运维工作

    Linux的使用环境也日趋成熟,各种开源产品络绎不绝,大有百花齐放的盛景,那么当Linux落地企业,回归工作时,我们还要面对这Linux运维方面的诸多问题,今天我们特意组织一场有关Linux 在企业运 ...