<!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. 项目中的process.bpmn的读-过程

    1.这次项目中遇到了process.bpmn类的封装好的类.怎么读呢?不知道,一周过去了,总算明白点. 2.首先也是从Controller开始,走进service层,比如mybatis,调用的就不是m ...

  2. 期货、期权tick数据接收

    功能: 1.开启之后,7*24自动运行. 2.在共享内存中存放当个交易日的tick数据,方便随时取用. 3.支持多行情源取数据.经过测试一个行情源峰值带宽要求为20M,所以使用时要配合带宽限制. 4. ...

  3. eclipse报错：unable to install breakpoint in .......due to missing line number attributes

    报错信息如下: 解决方案方案1.把断点都干掉,再启动.应该是代码更新后,断点位置没有代码了或位置改变了. 方案2.在Eclipse - Preferences - Java - Complier 下  ...

  4. 用Python开发实用程序 – 计算器

    一段时间前,自己制作了一个库 “sui-math”.这其实是math的翻版.做完后,python既然可以轻易的完成任何的数学计算,何不用python开发一个小程序专门用以计算呢? 现在我们越来越依赖于 ...

  5. 第二十三篇 玩转数据结构——栈（Stack）

          1.. 栈的特点: 栈也是一种线性结构: 相比数组,栈所对应的操作是数组的子集: 栈只能从一端添加元素,也只能从这一端取出元素,这一端通常称之为"栈顶": 向栈中添加元 ...

  6. 类欧几里得模板 p5170

    //类欧几里得的模板题 p5170 //求这三个式子: //第一个跟后两个没关联 //后两个跟其余两个都有关联: #include<cstdio> #include<algorith ...

  7. API接收数据反序列化失败问题查找

    C# API接收到数据后,反序列化后直接返回null,而不会给出错误提示,所以不好排查错误. 通过在api中直接进行反序列化,能够得到错误明细: 没有报错的时候,request会直接为null,不会报 ...

  8. 普及C组第一题（8.1）

    1999. [2015.8.6普及组模拟赛]Wexley接苹果(apple) 题目: Wexley最近发现了一个古老的屏幕游戏.游戏的屏幕被划分成n列.在屏幕的底端,有一个宽为m列的篮子(m<n ...

  9. linux下安装mongo数据库存

    https://www.runoob.com/mongodb/mongodb-linux-install.html 安装完后,要重启一下,否则无法运行./mongod 下载完安装包,并解压 tgz(以 ...

  10. 201771010135 杨蓉庆/张燕《面对对象程序设计（java）》第十三周学习总结

    1.实验目的与要求 (1) 掌握事件处理的基本原理,理解其用途: (2) 掌握AWT事件模型的工作机制: (3) 掌握事件处理的基本编程模型: (4) 了解GUI界面组件观感设置方法: (5) 掌握W ...