<!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. Go键盘输入和打印输出

    package main import ( "fmt" "bufio" "os" ) func main() { /* 输入和输出: fmt ...

  2. Go项目结构

    1. go项目工程结构 配置好工作目录后,就可以编码开发了,在这之前,我们看下go的通用项目结构,这里的结构主要是源代码相应地资源文件存放目录结构. 1.1 gopath目录 gopath目录就是我们 ...

  3. MySQL多表创建关联及操作

    外键 现在有两张表“分类表”和“商品表”,为了表明商品属于哪个 类别,通常情况下,我们将在商品上添加一列,用来存放分类的cid信息,此列成为外键. 此时,分类表 category 称作主表,cid 成 ...

  4. TCL Strings

    append    Append values to variable binary      Insert and extract fields from binary strings regexp ...

  5. 手机CPU那些事

    原文:https://zhuanlan.zhihu.com/p/19923974 如今人们买手机,都比较关心采用了什么 CPU,因为 CPU 直接决定了这台手机的性能,CPU 之于手机 就好比人的大脑 ...

  6. idea选中文件时左侧菜单自动定位到文件所在位置

    一:设置成自动定位,如图: 二:点击项目工程目录上的阻击按钮,自动定位

  7. django之关系及查询，数据类型，约束，分页

    目录 关系 数据列类型 数据类型的约束 分页 关系 1. 一对一(水平分表) 母表: UserInfo id name age 子表: private id salary sp 创建模型语句: cla ...

  8. SVM资源

    算法源码: SVM-From-Scratch:https://github.com/adityajn105/SVM-From-Scratch

  9. 【PAT甲级】1076 Forwards on Weibo (30 分)

    题意: 输入两个正整数N和L(N<=1000,L<=6),接着输入N行数据每行包括它关注人数(<=100)和关注的人的序号,接着输入一行包含一个正整数K和K个序号.输出每次询问的人发 ...

  10. VMWare tools

    一.首先是安装VMWare tools1.以ROOT身份进入LINUX2.在虚拟机软件VMWARE状态栏中,点击 SETTING菜单下的ENABLE VMWARE TOOLS子菜单,此时在linux的 ...