<!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. set,get,setter

    JS对象属性中get/set与getter/setter是什么 2019-01-18 15:07:44 CHENKAI188 阅读数 686更多 分类专栏: JS修仙系列   版权声明:本文为博主原创 ...

  2. 题解【UVA12003】Array Transformer

    题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例#1 10 1 11 1 2 3 4 5 6 7 8 9 10 2 8 6 10 输出样例#1 1 2 3 4 5 6 7 8 9 6 ...

  3. 051_switch语句的使用 052_while循环详解 053_for循环详解_dowhile简介 054_嵌套循环_循环相关练习

    051_switch语句的使用 package testmode2;/** * 测试switch语句 * 遇到多值判断的时候,使用switch.当然,switch完全可以使用ifelseifelse代 ...

  4. Yii2.0 高级版修改默认访问控制器

    frontend->config->main-local.php $config = [ 'defaultRoute' => 'index/index',//修改默认访问控制器 'c ...

  5. 优酷1080p的kux格式文件怎么转换为MP4格式？

    直接使用优酷自己的FFMPEG解码! 格式为:"优酷ffmpeg.exe的安装地址" -y -i ".kux文件储存地址" -c:v copy -c:a cop ...

  6. Python 特殊列表操作记录

    1.列表中的NaN数据处理 由于在Excel中筛选数据时,会出现NaN这种数据,所以需要将其删除掉,处理函数如下: 由于NaN数据类型与其他数据类型不一样,所以需要需要根据类型将其去除掉. 2列表关于 ...

  7. pwnable.kr-random-Writeup

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

  8. PHP5中__get()、__set()方法

    标题是:PHP5中__get().__set()方法,不错,在PHP5以下(PHP4)是没有这两个方法的. __get()方法:这个方法用来获取私有成员属性值的,有一个参数,参数传入你要获取的成员属性 ...

  9. Spring Boot整合EhCache

    本文讲解Spring Boot与EhCache的整合. 1 EhCache简介 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认CacheProvid ...

  10. Visual Studio Code打不开

    1.win+R 2.输入cmd 3.输入netsh winsock reset然后就可以打开了,如果依然打不开就重启电脑试试