<!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-md-6 col-lg-4"  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-md-6 col-lg-8" 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> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：手机、平板电脑、台式电脑

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 手机.平板电脑.台式电脑</title&g ...

  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 网格系统实例：偏移列

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：引用（Blockquote）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：地址（Address）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Lose it!

    You are given an array aa consisting of nn integers. Each aiai is one of the six following numbers:  ...

  2. WLC-Virtual Interface IP

    关于思科WLC,有很多接口类型,如下所示,这里主要针对Virtual IP记录一些最佳实践建议. 思科WLC的Virtual IP地址的作用: • Mobility management • DHCP ...

  3. Git - 04. git 缓存

    1. 概述 简单描述, 已经被 暂存 过的文件的 操作 和 生命周期 在 缓存区 中的声明周期 暂时只与 缓存区 做交互 2. 文件生命周期 略 这个之前讲过 3. 命令 1. stage 文件 概述 ...

  4. 输入两个正整数num1、num2,计算并输出它们的和、差、积、整数商和余数

    课本例题 /*输入两个正整数num1.num2,计算并输出它们的和.差.积.整数商和余数.*/ #include<stdio.h> int main() { int num1, num2; ...

  5. 每天进步一点点------SOPC的Avalon-MM IP核(三) LCD1602 IP定制

    注:Avalon信号类型命名参考图 /********************************************************************************* ...

  6. （原创）Windows下编译的Shell脚本不能再Linux中运行的解决办法

    一.原理 Windows编译的文件和Linux编译的文件格式不太一样,导致在Linux运行Shell脚本的时候会提示:/bin/bash^M: bad interpreter: 没有那个文件或目录. ...

  7. pyqt5 通过QLinearGradient 绘制取色板

    要绘制HSV取色板,一般通过绘制前景色和背景色的方式实现,先绘制前景,然后绘制背景,前景是HSV颜色空间,从左到右,背景是亮度,从上到下,xs和ys是鼠标的当前的位置. def graphicsVie ...

  8. JS高级---原型的引入，原型添加的方法解决数据共享

    原型的引入:解决:通过构造函数创建对象带来的问题,即浪费内存(一个对象开一个内存,多个对象开多个内存) 通过原型来添加方法,解决数据共享,节省内存空间 <script> function ...

  9. 喵星之旅-狂奔的兔子-rabbitmq的java客户端使用入门

    一.简介 RabbitMQ是实现了高级消息队列协议(AMQP)的开源消息代理软件(亦称面向消息的中间件). 消息队列都涉及的生产者消费者模型,不做详解,本文只作为快速使用的参考文档. 消息队列主要有点 ...

  10. ping命令基于ICMP协议的返回信息分析

    Ping是潜水艇人员的专用术语,表示回应的声纳脉冲,在网络中 Ping 是一个十分好用的 TCP/IP 工具.它主要的功能是用来检测网络的连通情况和分析网络速度.可以利用 PING 命令检查网络连通状 ...