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

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

  2. DSP---TI CCSv5.5.x-Windows安装

    TI CCSv5.5.x(正式版)-Windows版本 国内2013年9月13日首发安装CCSv5.5图示 *请关掉防火墙及杀毒软件进行安装 第一步 第二步 安装程序检测到挂起的重新启动,这可能在安装 ...

  3. 在电竞圈想摧枯拉朽的AI，到底能带来什么？

    2019ChinaJoy,似乎并没有让这个暑期彻底燃动起来.在业界和玩家看来,2019ChinaJoy亮点匮乏.饱受诟病.不过细心观察的话,能够发现一个特殊现象--AI取代此前猎艳性质的cosplay ...

  4. 使用Id访问table对象，使用Id访问Input对象

    先看例子(好吧     无意中发现   可以通过Id访问DOM元素,如div) <!DOCTYPE html> <html> <head> <meta cha ...

  5. 初识hadoop --- (分布式文件系统 + 分块计算)

    [转载] + 整理 2016-11-18 使用范围: Hadoop典型应用有:搜索.日志处理.推荐系统.数据分析.视频图像分析.数据保存等. Hadoop历史 雏形开始于2002年的Apache的Nu ...

  6. Loading class `com.mysql.jdbc.Driver'. This is deprecated

    注意mysql的版本,pom.xml里面的版本.External Librarlies里面的mysql版本.application.properties版本都要检查 有时候还会报 Invalid bo ...

  7. 前端知识之css

    css的几种引入方式 行内样式 行内式是在标记的style属性中设定css样式,不推荐大规模使用 <p style='color:red'>hello world</p> 内部 ...

  8. 微信小程序UDP通信，注意点 接收 onMessage 收到的message是ArrayBuffer缓冲，不能直接输出，要另转String处理

    1.WXML 页面代码 <!--index.wxml--> <view class="container"> <view class="us ...

  9. 推荐几个c/c++语言编写的游戏源码下载网站

    在游戏开发的学习或工作中,利用完好的游戏源码可以事半功倍,不仅可以逆向学习开拓思维,也可以大大减少设计周期.自己浏览了很游戏源码下载的网站,发现大多数质量都良莠不齐,且大部分需要消费才能下载,下面整理 ...

  10. Knapsack Cryptosystem 牛客团队赛

    时限2s题意: 第一行包含两个整数,分别是n(1 <= n <= 36)和s(0 <= s <9 * 10 18) 第二行包含n个整数,它们是{a i }(0 <a i ...