<!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. Java基础(十二)之包和权限访问

    软件包 软件包解决了两个类名字一样的问题.软件包就是一个"文件夹". 包名的命名规范:1.要求所有字母都小写:2.包名一般情况下,是你的域名倒过来写.比如baidu.com,pac ...

  2. 将 master 节点服务器从 k8s 集群中移除并重新加入

    背景 1 台 master 加入集群后发现忘了修改主机名,而在 k8s 集群中修改节点主机名非常麻烦,不如将 master 退出集群改名并重新加入集群(前提是用的是高可用集群). 操作步骤 ssh 登 ...

  3. Java - 判断字符串是否是回文

    首先,回文是指类似于“12345”,“abcdcba”的形式,即正念和反念都是一样的字符串 判断字符串是否是回文,这边介绍3种办法 将字符串翻转,判断翻转后的字符串和原字符串是否相等 public s ...

  4. Linux - gitlab的命令

    启动 sudo gitlab-ctl start 关闭 sudo gitlab-ctl stop 重新加载配置文件 sudo gitlab-ctl reconfigure 在本地初始化一个本地仓库 g ...

  5. Servlet获取配置信息（ServletConfig）

    ServletConfig ServletConfig:当Servlet容器初始化Servlet时,Servlet容器会给Servlet的init方法传入一个ServletConfig.Servlet ...

  6. 第一struts2程序

    今天学习了第一个struts2程序 第一步建立一个java web程序 第二步 加入jar包 第三步 添加两个jsp文件 login.jsp和result.jsp文件 login.jsp 在body部 ...

  7. Flutter 中的常见的按钮组件 以及自 定义按钮组件

    一.Flutter 中的按钮组件介绍   Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.   IconButton.Outlin ...

  8. 【Python redis】

    目录 基本用法 连接池 基本命令 String Hash List set "下载:pip install redis @ *** 基本用法 redis库提供两个类,Redis和Strict ...

  9. Centos6.10-FastDFS-存储器Http配置

    Centos610系列配置 1.准备配置 cd /opt/download/fastdfs-master/confcp http.conf /etc/fdfs/http.confcp mime.typ ...

  10. js中的文本编辑器控件KindEditor

    使用文本编辑器控件KindEditor渲染文本域页面显示 this.sync()同步KindEditor的值到textarea文本框 editor.isEmpty()判断文本域是否是空 editer. ...