<!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. 051_switch语句的使用 052_while循环详解 053_for循环详解_dowhile简介 054_嵌套循环_循环相关练习

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

  2. 安装pecl

    $ wget http://pear.php.net/go-pear.phar $ php go-pear.phar //php版本 < 7  $ yum install php-pear // ...

  3. Django_模板

    1. 模板变量 小插曲 2. 模板点语法和标签 2.1 获取属性 2.2 调用方法 2.3 获取索引 2.4 获取字典中的值 3. 模板中的标签 3.1 if 3.2 for 3.3 注释 乘除 整除 ...

  4. Maven安装与学习

    一.安装 1.下载http://maven.apache.org/download.cgi 2.选择zip格式 安装完后解压到某一位置(E:\xitong\major\apache-maven-3.6 ...

  5. 【资源分享】Undertale（传说之下）简体中文精品整合包

    *----------------------------------------------[下载区]----------------------------------------------* ...

  6. MySQL多表创建关联及操作

    外键 现在有两张表“分类表”和“商品表”,为了表明商品属于哪个 类别,通常情况下,我们将在商品上添加一列,用来存放分类的cid信息,此列成为外键. 此时,分类表 category 称作主表,cid 成 ...

  7. 查询数据操作：limit

    1.作用: 在查看数据时用于限制获得的记录数量,一般放在最后. 2.语法: limit offset,row_count; 解析: offset:偏移量,索引值默认从0开始,可以省略 row_coun ...

  8. 使用Spring框架整合Java Mail

    我的博客名为黑客之谜,今天演示的案例中会出现我的邮箱,还不赶紧收藏!我现在是小白,但是随着时间的流逝,我会逐渐向大神走进,所以,喜欢我的,或者喜欢大神的,点一波关注吧!顺便说一下,双十二快到了,有什么 ...

  9. SQL常用语句和函数

    从一个表中选取数据插入到另一个表中: select column_name(s) into new_table_name from old_table_name --new_table_name表不必 ...

  10. vue使用过程中遇到的细节问题

    1. 在methods 中添加一个方法.如果这个方法使用箭头函数的话,箭头函数中的this不是当前的vue实例,所以通过this.xxx是获取不到实例上面的属性的,这时我们可以用函数的简写来获取到实例 ...