<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8">

   <title>Bootstrap 实例 - 响应式的列重置</title>

   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

   <script src="https://cdn.staticfile.org/jquery/2.1.1/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">

   <div class="row" >

      <div class="col-xs-6 col-sm-3"

         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.</p>

      </div>

      <div class="col-xs-6 col-sm-3"

         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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut.

         </p>

      </div>

      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-sm-3"

         style="background-color: #dedef8;

         box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco

            laboris nisi ut aliquip ex ea commodo consequat.

         </p>

      </div>

      <div class="col-xs-6 col-sm-3"

         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

         </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> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 图片：图片响应式 (将很好地扩展到父元素)

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

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

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

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：中型和大型设备

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 中型和大型设备</title> &l ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：堆叠的水平

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

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：列排序

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

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：嵌套列

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

随机推荐

  1. E. Vus the Cossack and a Field (求一有规律矩形区域值) (有一结论待证)

    E. Vus the Cossack and a Field (求一有规律矩形区域值) 题意:给出一个原01矩阵,它按照以下规则拓展:向右和下拓展一个相同大小的 0 1 分别和原矩阵对应位置相反的矩阵 ...

  2. （c#）拼写单词

    题目 解

  3. 每天进步一点点------Allegro手工建立电路板

    手工建立电路板步骤(以某个四层板为例): (1)file---new---board/board wizard来建立.brd电路板文件.设置名称和保存路径后,要设置绘图区域的大小,setup---dr ...

  4. 移动端CSS重置

    移动端 CSS Reset 该怎么写 为了应对各大浏览器厂商对浏览器默认样式的不统一处理,我们往往会进行一个 css reset 操作,由于没有标准而且受个人偏好影响,每个公司实现的都不尽相同.关于 ...

  5. 对象析构谈—— delete this 的使用及注意事项

    this对象是必须是用 new操作符分配的(而不是用new[],也不是用placement new,也不是局部对象,也不是global对象): delete this后,不能访问该对象任何的成员变量及 ...

  6. bugku 求getshell

    要修改三个地方 根据大佬们的writeup,要修改三个地方: 1.扩展名filename 2.filename下面一行的Content-Type:image/jpeg 3.最最最重要的是请求头里的Co ...

  7. Educational Codeforces Round 78 (Rated for Div. 2）E（构造，DFS）

    DFS,把和当前结点相连的点全都括在当前结点左右区间里,它们的左端点依次++,然后对这些结点进行DFS,优先对左端点更大的进行DFS,这样它右端点会先括起来,和它同层的结点(后DFS的那些)的区间会把 ...

  8. HGsoft-downloader

    [NEW]HGsoft-downloader上线了! 给你提供一个简洁无广告的电脑软件下载平台,换个角度下载电脑软件. 网站地址:Go

  9. jq的 on 事件委托 导致多次执行问题

    解除 这个元素 在 父级上的 click 事件委托$(msg.fatherDiv).off('click','.fangdaimg_fn2'); click事件$('.fangdaimg_fn2'). ...

  10. awk函数实现将简化IPV6地址补全

    在用awk处理文本时,有些场景需要将简化的IPV6地址补充成完整的IPV6地址,下边函数可简单实现: IPV6地址补全函数 # ipv6地址补全函数 function compipv6(orig_ad ...