<!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. Android开发实战——记账本（5)

    开发日志——(5)     今天打算将图标的功能实现,将打开图表的选项放在右上方,所以重写MainActivity中的onOptionsItemSelected方法.增添Chart选项 public ...

  2. 发送数据给sap和接收

    1.确保已经连通sap 2.发送数据:这是以表的形式发送,而且是批量发送给sap 3.接收sap返回信息:这个比较特别,碰到时试一试 package com.yiyezhiqiu.lyh.utils; ...

  3. 【New】WoSo_我搜 正式上线

    [New]WoSo_我搜 正式上线 一站式搜索平台 聚合多种领域搜索引擎,大大提高搜索效率,使搜索更简单 地址:https://huangenet.github.io/WoSo/

  4. OSI七层协议详解

    一.简介 开放系统互连参考模型 (Open System Interconnect 简称OSI)是国际标准化组织(ISO)和国际电报电话咨询委员会(CCITT)联合制定的开放系统互连参考模型,为开放式 ...

  5. poj 3057（bfs+二分匹配）

    题目链接:http://poj.org/problem?id=3057 题目大概意思是有一块区域组成的房间,房间的边缘有门和墙壁,'X'代表墙壁,'D'代表门,房间内部的' . '代表空区域,每个空区 ...

  6. bugku 你必须让他停下

    首先打开链接会发现一个不断刷新的网页 然后使用抓包工具burpsuit抓网页 然后右键点击跳转到repeater 然后点击go一直点击 注意黄色区域的变化然后在点击过程中会发现flag 然后拿到答案

  7. 2.2 selenium:org.openqa.selenium.WebDriverException: f.QueryInterface is not a function

    来源: http://blog.csdn.net/qiyueqinglian/article/details/47813271 URL中地址写不全的时候,就会报如题错误. url必须是完整的,比如ht ...

  8. hdu 4289 dinic模板

    题意:有N个城市,现在城市S出现了一伙歹徒,他们想运送一些炸弹到D城市,不过警方已经得到了线报知道他们的事情,不过警察不知道他们所在的具体位置,所以只能采取封锁城市的办法来阻断暴徒,不过封锁城市是需要 ...

  9. 简单实现一个button控制两种状态

    <button class="btn a-bgcolor" data-toggle="tooltip" data-placement="left ...

  10. 吴裕雄 python 机器学习——数据预处理过滤式特征选取VarianceThreshold模型

    from sklearn.feature_selection import VarianceThreshold #数据预处理过滤式特征选取VarianceThreshold模型 def test_Va ...