<!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. C语言 fgets

    C语言 fgets #include <stdio.h> char *fgets(char *s, int size, FILE *stream); 功能:从stream指定的文件内读入字 ...

  2. Custom LED Keychain, Small And Surefire Gifts

    The    LED Keychain    makes it easy for people to carry their keys with them and carry them with th ...

  3. 【Python】【爬虫】爬取酷狗音乐网络红歌榜

    原理:我的上篇博客 import requests import time from bs4 import BeautifulSoup def get_html(url): ''' 获得 HTML ' ...

  4. 编程道拓扑bcd.top 0x01/ 开局第一篇： 随便聊聊/ 随笔

    0x01 开局 编程道拓扑(bcd.top)是一个前端从业者的思考和总结, 如果你喜欢, 欢迎关注! 作者是一个前端从业者, 本系列会总结作者在工作和学习中的一些思考, 会有具体的技术点, 也会有关于 ...

  5. 深度学习之tensorflow框架（中）

    会话 开启会话 tf.Session用于完整的程序中 tf.InteractiveSession用于交互式上下文中的tensorflow 查看张量的值 都必须在会话里面 c_new_value=new ...

  6. iptables详解（2）：四表五链

    关于iptables中“四表五链”,我们今天来好好唠唠: 1.表的概念: 我们把具有相同功能的规则的集合叫做"表",所以说,不同功能的规则,我们可以放置在不同的表中进行管理,而ip ...

  7. C 语言实例 - 判断闰年

    用户输入年份,判断该年份是否为闰年. #include <stdio.h> int main() { int year; printf("输入年份: "); scanf ...

  8. layuiAdmin std v1.x 【iframe版】开发者文档

    layuiAdmin pro v1.x [单页版]开发者文档 layuiAdmin.std(iframe 版) 是完全基于 layui 架构而成的通用型后台管理模板系统,采用传统的 iframe 多页 ...

  9. 《gPRC使用protobuf构建微服务》阅读笔记

    首先我需要去了解一些概念,根据百度百科了解到: l  微服务架构:微服务架构是一项在云中部署应用和服务的新技术.微服务可以在“自己的程序”中运行,并通过“轻量级设备与HTTP型API进行沟通”. l  ...

  10. spark-shell中往mysql数据库写数据报错

    今天在看spark方面的知识的时候,在spark-shell中往mysql写数据时报错,错误信息如下: ERROR Executor: Exception in task 0.0 in stage 4 ...