<!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. CAD 批量提取点坐标，实现坐标的快速提取

    原创 CAD 批量提取点坐标,实现坐标的快速提取 2018-08-07 20:36:13 caohongji 阅读数 13678   版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议 ...

  2. 安装proxmox VE (PVE 安装教程)

    1. 下载PVE, 笔者下载的版本是proxmox-ve_6.1-1.iso 版本,官网地址:https://www.proxmox.com/ 2. mac电脑dd命令刻录安装镜像 MacBook-P ...

  3. 转载：EQ--biquad filter

    http://www.musicdsp.org/files/Audio-EQ-Cookbook.txt https://arachnoid.com/BiQuadDesigner/index.html ...

  4. 在网页中插入背景音乐代码(html)

    有两种 分别用<bgsound>和<embed></embed>标签,当用<embed>插入背景音乐时可以设置宽度和高度为0,隐藏播放器. 二者的参数如 ...

  5. leetcode78.子集➕90.子集2

    78子集 dfs dfs1: 和全排列的区别就是对于当前考察的索引i,全排列如果不取i,之后还要取i,所以需要一个visited数组用来记录.对于子集问题如果不取i,之后也不必再取i. 单纯递归回溯 ...

  6. Flask 教程 第二十章：加点JavaScript魔法

    本文翻译自The Flask Mega-Tutorial Part XX: Some JavaScript Magic 这是Flask Mega-Tutorial系列的第二十部分,我将添加一个功能,当 ...

  7. 用python实现网络文件共享

    第一步:打开命令行 第二步:切换到要共享的文件夹目录 第三步:运行命令 python -m http.server 端口号 然后在浏览器输入显示的路径即可访问文件夹下的文件,点击即可下载,手机端亦可访 ...

  8. 吴裕雄 python 机器学习——集成学习AdaBoost算法回归模型

    import numpy as np import matplotlib.pyplot as plt from sklearn import datasets,ensemble from sklear ...

  9. iptables详解（1）：命令参数解析

    1.编辑配置网卡信息方法: 1.1 编辑配置文件:vim /etc/sysconfig/network-scripts/ifcfg-lo 1.2 nmtui命令:图形化配置 1.3 nm-connec ...

  10. C# 重载与重写

    重载(overload) 指调用同一方法名,但各方法中参数的数据类型.个数或顺序不同. public static int Add(int x,int y) { return x + y; } pub ...