<!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. 云原生学习笔记（3）——Kubernetes基本概念

    学习地址:https://developer.aliyun.com/lesson_1651_13078?spm=5176.270689.1397405.6.716ef5f8Q9z1z3#_13078 ...

  2. C语言编译和链接详解（通俗易懂，深入本质）

    我们平时所说的程序,是指双击后就可以直接运行的程序,这样的程序被称为可执行程序(Executable Program).在 Windows 下,可执行程序的后缀有.exe和.com(其中.exe比较常 ...

  3. 如何更改已经pushed的commit的注释信息（How to change the pushed commit message）

    1, 修改最后一次注释(Modify the last comment message) git commit -amend 2,修改之前的注释 1)输入: git rebase -i HEAD~3 ...

  4. 服务器安装mysql后配置远程访问权限

    #登录mysql mysql -uroot -p: use mysql: #所有ip能访问 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED B ...

  5. KM算法模板 hdu 2255

    KM算法是在匹配是完备的情况下寻找最优匹配. 首先,先将范围定为最大的情况,如果最大的情况无法满足,就下降一个维度继续匹配. 直到匹配成功. #include<cstdio> #inclu ...

  6. 后台怎么区分接口要写在哪个service类中呢（根据service服务区分）

    1,明确页面要实现什么功能,则页面对应的controller要写对应的controller方法 2,这个功能最终要由谁实现完成,在对应的service中药实现这个功能 3,这个接口的实现就写在最终完成 ...

  7. 消息队列（七）--- RocketMQ延时发送和消息重试（半原创）

    本文图片和部分总结来自于参考资料,半原创,侵删 问题 Rocketmq 重试是否有超时问题,假如超时了如何解决,是重新发送消息呢?还是一直等待 假如某个 msg 进入了重试队列(%RETRY_XXX% ...

  8. blog主题——黑夜

    blog主题,存储一下 /* Author: Io_oTI*/ /*Public*/ * { margin: 0; padding: 0; box-sizing: border-box; trans ...

  9. pwnable.kr-cmd1-Writeup

    MarkdownPad Document *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...

  10. 查看Oracle的表中有哪些索引（用user_indexes和user_ind_columns）

    用user_indexes和user_ind_columns系统表查看已经存在的索引 对于系统中已经存在的索引我们可以通过以下的两个系统视图(user_indexes和user_ind_columns ...