<!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. Java替换字符串中的\r\n

    public static void main(String[] args) { String str = "啊\r\n啊"; str = str.replaceAll(" ...

  2. [RedHat]“is not in the sudoers file”解决方法

    当在终端执行sudo命令时,系统提示“luckchengis not in the sudoers file”: $ sudo ls Password: luckcheng is not in the ...

  3. hadoop之mr框架的源码理解注意点

    1.reduce源码中的 GroupComparable和SecondaryComparable到底都是干什么的 理解点1: 源码位置 理解点 secondaryComparable这个是可以对map ...

  4. css动画效果之transition（动画过渡效果属性）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js的全局变量与var关键字

    var a = '1'; 如果定义在函数外,就是全局变量.如果定义在函数内,就不是全局变量,只能在函数内调用. 但是:如果在函数内定义变量,没有加var关键字,默认表示该变量是全局的.

  6. 普及C组第一题（8.9）

    2297. [noip普及组2(放到第一题)]棋盘 (好像重名了)(File IO): input:chess.in output:chess.out 题目描述 众所周知,国际象棋的棋盘是一个网格.国 ...

  7. EnumSet

    这个概念是在 Effective Java中了解到的, 可以通过EnumSet来代替位域这种方式表达.并不是很常见的概念, 因此记录下.如果在这之前恰好了解过 bitmap这种数据结构就更好了.不了解 ...

  8. 【应急响应】Tomcat安全加固

    一.删除或选定无效账号 二.密码复杂度 三.启用日志记录功能 四.登录超时 五.Tomcat错误页面重定向 六.禁止Tomcat目录列表显示文件

  9. 如何用navicat连接linux服务器上的mysql以及重启服务

    1,开启mysql权限:https://www.cnblogs.com/NaughtyCat/p/how-to-connect-to-mysql-on-linux-by-navicat.html my ...

  10. [Excel] 一些实用的函数式子

    这次是用php写了一个系统 收集信息,需要身份证号作为验证,但是为了信息安全 只能在数据库里面放身份证后六位.也就是说.最终导出的Excel也是只有身份证的后六位.,, 后来我发现我本地保存的完整身份 ...