<!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. 浏览器中js执行机制学习笔记

    浏览器中js执行机制学习笔记 RiverSouthMan关注 0.0772019.05.15 20:56:37字数 872阅读 291 同步任务 当一个脚本第一次执行的时候,js引擎会解析这段代码,并 ...

  2. Apache如何开启Gzip压缩

    https://teddysun.com/326.html 在开启 Gzip 之前,需先确认 Apache 的配置文件中有没有加载 mod_deflate 和 mod_headers 模块. 打开Ap ...

  3. [RedHat]“is not in the sudoers file”解决方法

    当在终端执行sudo命令时,系统提示“luckchengis not in the sudoers file”: $ sudo ls Password: luckcheng is not in the ...

  4. Systemd 学习

    转:http://www.ruanyifeng.com/blog/2016/03/systemd-tutorial-commands.html 原文链接:https://www.jianshu.com ...

  5. 刷题2. Add Two Numbers

    一.题目要求 You are given two non-empty linked lists representing two non-negative integers. The digits a ...

  6. python接口自动化测试 - requests库的post请求进行文件上传

    前言 如果需要发送文件到服务器,比如上传图片.视频等,就需要发送二进制数据. 一般上传文件使用的都是 Content-Type: multipart/form-data; 数据类型,可以发送文件,也可 ...

  7. python开发基础作业02：三级菜单，使用字典dic及列表

    作业要求及提示:三级菜单 ''' 1.三级菜单 2.可依次进入各子菜单 3.菜单能够回到上一级 4.用到知识点:字典.列表.多层循环.函数 条件:基本  if  else 嵌套  if...if... ...

  8. linux安装tomcat步骤

    2.1 查看当前系统是否安装过该软件,如果安装过则下载 rpm –qa | grep –i tomcat rpm –e --nodeps 程序名称2.2上传2.3创建tomcat的安装路径 mkdir ...

  9. Lining Up

    AtCoder - 2271-Lining Up                                                                             ...

  10. Spring - Spring Boot - 应用构建与运行

    概述 spring boot 应用构建 spring boot 应用运行 背景 之前的看了看 Spring 的书, 结果老懒没实践 而且后续有别的想法, 但这个始终是第一步 1. 准备 知识 java ...