这次我们来说下列排序：

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <!-- Bootstrap不支持IE的兼容模式，加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 由于Bootstrap 3是移动设备优先，加入此标签是为了确保适当的绘制和触屏缩放 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap-Template-07</title>

    <!-- 最新 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <style>

.show-grid { margin-top: 15px; }

.show-grid [class^="col-"] {

  padding-top: 10px;

  padding-bottom: 10px;

  background-color: #eee;

  border: 1px solid #ddd;

}

    </style>

</head>

<body>

<div class="container">

<h1>案例：列排序<small>.col-md-push-* （推）和 .col-md-pull-*（拉）</small></h1>

<div class="row show-grid">

  <div class="col-md-3">.col-md-3</div>

  <div class="col-md-3">.col-md-3</div>

  <div class="col-md-3">.col-md-3</div>

  <div class="col-md-3">.col-md-3</div>

</div>

<div class="row show-grid">

  <div class="col-md-3 col-md-push-3">.col-md-3 .col-md-push-3</div>

</div>

<div class="row show-grid">

  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>

  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>

</div>

</div>

    <!-- 所有 Bootstrap 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入 -->

    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>

</html>

看下运行效果图：

可以看出，我定义了三行。

第一行被平均分成4份，每份占有3列。这一行主要是为了与下面两行进行对照的。

第二行里只有一个元素且占有3列，然后对此元素也添加了.col-md-push-3的样式类。（让占有3个列的元素又向右移动了3列，那么现在就是占据了4、5、6这3个列。）

第三列被分为两份，第一份占有9列（使用col-md-push-3向右移动3列），第二份占有3列（使用col-md-pull-9向左移动9列）。

【10】了解Bootstrap栅格系统基础案例（5）的更多相关文章

  1. 【9】了解Bootstrap栅格系统基础案例（4）

    这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含 ...

  2. 【6】了解Bootstrap栅格系统基础案例（1）

    从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例) ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设 ...

  3. 【7】了解Bootstrap栅格系统基础案例（2）

    ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己 ...

  4. 【8】了解Bootstrap栅格系统基础案例（3）

    这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-off ...

  5. 巧用 BootStrap --- 栅格系统（布局）轻松搞定网页响应式布局！

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  6. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  7. 第二百三十五节，Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一．移动 ...

  8. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  9. Bootstrap栅格系统（布局）

    栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

随机推荐

  1. PHP中获取中英文混合字符串长度[主要是指个数，而不是字符串长度](转)

    今晚在写框架的表单验证类时,需要判断某个字符串长度是否在指定区间内,很自然地,想到了PHP中的strlen函数. $str = 'Hello world!'; echo strlen($str);   ...

  2. android131 360 05 手势触摸滑动，sim卡，开机启动的广播，手机联系人，SharedPreferences，拦截短信

    安卓手势触摸滑动: package com.itheima52.mobilesafe.activity; import android.app.Activity; import android.con ...

  3. android130 android启动

    Android的编译环境只支持Linux和Mac OS,google推荐使用64位操作系统, ### android启动 > #### 当引导程序启动Linux内核后,会加载各种驱动和数据结构, ...

  4. 六、Socket之UDP异步传输文件-实现稳定的文件传输

    上一篇文章五.Socket之UDP异步传输文件-实现传输中取消传送中,还遗留了一个传输文件最大的问题,就是传输过程中丢包,这样在文件传输过程中就会卡住了,这篇文章就来解决文件传输中的丢包问题,实现稳定 ...

  5. ie6下子元素撑大父元素

    今天遇到了一个问题.在给a元素定义hover并且增大尺寸时,IE6下该元素会把父元素撑大,而非IE浏览器则是表现为溢出效果不会撑大父元素(我想要的效果).解决IE6的这个问题是采用了一个定位+负边距的 ...

  6. Making the impossible: 3 nodes intercontinental replication--转载

    原文:http://www.percona.com/blog/2012/01/11/making-the-impossible-3-nodes-intercontinental-replication ...

  7. Languages

    Languages A language class exists inside the system/Core folder, this class have 2 methods: load - L ...

  8. windows 7 共享，未授予用户在此计算机上的请求登录类型

    刚刚重装了windows7,新下载的一个ghost版本,结果却不能共享,每次访问这台机器的共享都提示, 未授予用户在此计算机上的请求登录类型 这个情况好像是存在于win7访问win7,我用一台XP系统 ...

  9. 从Eclipse里导出Android程序到手机里

    参考自:http://wenku.baidu.com/view/e28bb57c1711cc7931b716a7.html

  10. Centos7 安装mongodb3.2.9 过程

    1:wget --no-check-certificate  https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-amazon-3.2.9.tg ...