<!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. Docker - 命令 - docker container

    概述 整理 docker 容器的命令 1. 分类(25个) 查看 ls diff logs inspect port stats top 生命周期 pause prune create kill re ...

  2. Java的Path、Paths和Files

    前言 因为这几天被java.nio的这几个接口和工具类卡到了,就顺便地查了一波文档以及使用方法,这篇其实更像是API的复制粘贴,只不过我在注释里多写了一些output和注意事项,看不惯API的可以选择 ...

  3. 关于宽搜BFS广度优先搜索的那点事

    以前一直知道深搜是一个递归栈,广搜是队列,FIFO先进先出LILO后进后出啥的.DFS是以深度作为第一关键词,即当碰到岔道口时总是先选择其中的一条岔路前进,而不管其他岔路,直到碰到死胡同时才返回岔道口 ...

  4. 两个Beta函数类型的积分及其一般形式

    \[\Large\displaystyle \int_{0}^{1}\frac{\sqrt[4]{x\left ( 1-x \right )^{3}}}{\left ( 1+x \right )^{3 ...

  5. element 确认框 confirm 的写法

    this.confirm('内容', '标题', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'success', callbac ...

  6. 深入理解Java虚拟机(1)

    Java内存区域 对于Java程序员来说,在虚拟机的自动内存管理机制下,不再需要为每一个new操作去写配对的delete和free代码,不容易出现内存泄露和内存溢出问题,可以直接交给虚拟机进行管理. ...

  7. 五、request模块

    描述:requests是python的一个第三方HTTP(Hypertext Transfer Protocol,超文本传输协议)库,它比python自带的网络库urllib更加简单.方便和人性化:使 ...

  8. CSS实现心形、六角星、六边形、平行四边形等几何

    本文将利用border属性实现简单几何的绘制: 效果图: 正八角星 说明:采用两个正方形以中心进行旋转叠加: /* 八角星 */ #burst-8 { background: #6376ff1f; w ...

  9. VS2017创建控制台应用后，编写完代码调试正常，使用exe文件直接执行出现闪退情况解决方法。

    这是因为代码中包含的相对路径的原因. 解决办法:把项目中包含的所有相对路径修改为绝对路径. (个人觉得因为直接执行exe文件,默认打开在C盘的用户目录下.) 例如: std::string DATA_ ...

  10. canvas的beginPath和closePath

    https://www.cnblogs.com/xuehaoyue/p/6549682.html https://segmentfault.com/a/1190000010330319 https:/ ...