<!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. C++11 auto的用法

    参考博客:https://www.cnblogs.com/KunLunSu/p/7861330.html

  2. C语言是菜鸟和大神的分水岭

    作为一门古老的编程语言,C语言已经坚挺了好几十年了,初学者从C语言入门,大学将C语言视为基础课程.不管别人如何抨击,如何唱衰,C语言就是屹立不倒:Java.C#.Python.PHP.Perl 等都有 ...

  3. 使用VS2017开发安卓app（2）新建项目

    安装完成后,在c#下找到Android,选择Android应用(Xamarin),修改项目名称和路径,新建第一个安卓项目! 点击确定后会出现 这里我们选择空白应用和Android 7.1. 创建新项目 ...

  4. 浅谈ABB机器人（工具坐标，工件坐标，有效载荷）

    工具坐标(tool): 使tcl坐标偏移到工具上,例如焊接工作,使机器人工作点切入焊枪点上 mass:工具的重量 xyz:偏移距离的大小 验证:通过手动模式,切换至自定义工具,重定向 工件坐标(wob ...

  5. 微信小程序 - height: calc(xx - xx)；无效

    遇到一个小问题,记录一下 问题:在微信小程序中使用scroll-view标签时,用height:cale(xx - xx)设置高度无效,在page中设置高度为百分百依旧无效 解决办法:直接在父级vie ...

  6. tomcat在win10系统中安装失败的问题，修改tomcat内存

    自己以前在其他系统上安装tomcat服务都没有问题,但是在win10系统上安装就经常出现问题,自己总结了一下安装步骤: 1.首先需要配置环境变量, CATALINA_HOME 2.修改service. ...

  7. Abaqus 载荷分类（部分）

    目录 1. 集中载荷 1.1 集中载荷施加方法 1.2 定义集中跟随力 1.3 指定文件定义集中节点力 2. 分布载荷 2.1 分布载荷分类 3. 热载荷 3.1 模拟热辐射 3.2 直接定义热流量 ...

  8. for语句处理多维数组

    看C++Primer第三章看到的,记录一下. 下面这段代码非法,因为row指向的是每一行的一个大小为10的一维数组,默认转为指针,即row其实是一个int*类型的指针,显然内层循环就出错了 int a ...

  9. vtk学习记录（一）——vtk工程配置与生成

    前言 图形图像这块儿,最近因为工作需要接触的相对多了点儿,精力基本上也都投入了这块儿,搞的天天要死要活,毕竟我一个.net的突然来到cxx的世界,也是很苦恼的,也是头一次见到新建工程就需要配置并且解决 ...

  10. Java开发简单的家居购物商城系统 JSP 附源码

    开发环境:    Windows操作系统开发工具: MyEclipse+Jdk+Tomcat+MYSQL数据库 注意:使用tomcat7运行 运行效果图 源码及原文链接:https://javadao ...