<!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">

   <h1>Hello, world!</h1>

   <div class="row">

      <p>排序前</p>

      <div class="col-md-4" style="background-color: #dedef8;

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         我在左边

      </div>

      <div class="col-md-8" style="background-color: #dedef8;

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         我在右边

      </div>

   </div><br>

   <div class="row">

      <p>排序后</p>

      <div class="col-md-4 col-md-push-8"

         style="background-color: #dedef8;

         box-shadow: inset 1px -1px 1px #444,

         inset -1px 1px 1px #444;">

         我在左边

      </div>

      <div class="col-md-8 col-md-pull-4"

         style="background-color: #dedef8;

         box-shadow: inset 1px -1px 1px #444,

         inset -1px 1px 1px #444;">

         我在右边

      </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> <title>Bootstrap 实例 - 手机.平板电脑.台式电脑</title&g ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：中型和大型设备

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 中型和大型设备</title> &l ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：堆叠的水平

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：嵌套列

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：偏移列

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：引用（Blockquote）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：地址（Address）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：缩写

    <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 缩写</title> <lin ...

随机推荐

  1. 【使用python urllib时出现[SSL: CERTIFICATE_VERIFY_FAILED]报错的解决方案】

    "首先,这个报错是告诉你,你的证书有问题. 其次,出现这个问题的原因,在于Python本身. 问题原因 Python升级到2.7.9以后,引入了一个新特性. 当使用urllib打开https ...

  2. python浅析模块，包及其相关用法

    一,模块 什么是模块? 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里面,代码会越来越长,越来越不容易维护. 为了编写可以维护的代码,我们把很多函数分组,分别放到不同额文件,这样,每个文 ...

  3. 一些基础但有趣的shell脚本

    一.打印9*9乘法表 #!/bin/bash for i in `seq 9` do for j in `seq $i` do echo -n "$i*$j=$[i*j]" don ...

  4. 微信小程序前端坑

    链接:https://www.cnblogs.com/showMagic/p/7677551.html

  5. 【C语言】创建一个函数，判断某一正整数是否为水仙花数，并调用这个函数找出1000以内所有水仙花数

    #include <stdio.h> int fun(int x) { int a, b, c; a = x / ; b = x % / ; c = x % ; if (x == a * ...

  6. java中LinkedList源码分析

    ArrayList是动态数组,其实本质就是对数组的操作.那么LinkedList实现原理和ArrayList是完全不一样的.现在就来分析一下ArrayList和LinkeList的优劣吧LinkedL ...

  7. 数码管显示“0~F”的共阳共阴数码管编码表

    嵌入式设备中数码管显示“0~F”的方式是:定义了一个数组,里面含有16个元素,分别代表0~F,这样可以方便以后的调用.共阳极数码管编码表:unsigned char table[]={0xc0,0xf ...

  8. coturn服务器配置中英对比

    coturn服务器配置中英对比 默认配置位置 /etc/turnserver.conf # RFC5766-TURN-SERVER configuration file # RFC5766-TURN- ...

  9. Wordpress-微信机器人高级版

    微信机器人高级版是我爱水煮鱼开发的一款插件,功能很棒,运行此插件需要同时开启WPJAM Basic插件. 高级版5.0 版本对服务器要求非常高,只支持 Linux 服务器,PHP 要求 7.2 及以上 ...

  10. C# 面试编程算法题

    求以下表达式的值: 1. 1 - 2 + 3 - 4 + … + m public static int Foo1(int m) { ; ; i <= m; i++) { == ) { sum ...