1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <title>Bootstrap 实例 - 列排序</title>
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  6.    <script src="/scripts/jquery.min.js"></script>
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div class="container">
  12.  
  13.    <h1>Hello, world!</h1>
  14.  
  15.    <div class="row">
  16.       <p>排序前</p>
  17.       <div class="col-md-4" style="background-color: #dedef8;
  18.          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
  19.          我在左边
  20.       </div>
  21.       <div class="col-md-8" style="background-color: #dedef8;
  22.          box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
  23.          我在右边
  24.       </div>
  25.    </div><br>
  26.    <div class="row">
  27.       <p>排序后</p>
  28.       <div class="col-md-4 col-md-push-8"
  29.          style="background-color: #dedef8;
  30.          box-shadow: inset 1px -1px 1px #444,
  31.          inset -1px 1px 1px #444;">
  32.          我在左边
  33.       </div>
  34.       <div class="col-md-8 col-md-pull-4"
  35.          style="background-color: #dedef8;
  36.          box-shadow: inset 1px -1px 1px #444,
  37.          inset -1px 1px 1px #444;">
  38.          我在右边
  39.       </div>
  40.    </div>
  41.  
  42. </div>
  43.  
  44. </body>
  45. </html>

bootstrap列排序的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例：列排序

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

  2. Bootstrap 列偏移\列嵌套\列排序

    1.列偏移 这个其实很简单就是通过一个样式类,通过.col-md-offset-*可以将列偏移到右侧.这些class通过使用*选择器将所有列增加了列的左侧margin.例如,.col-md-offse ...

  3. 【变态需求】bootstrapTable列排序-选择正序倒序不排序

    产品经理:那个table排序能不能点击后弹个选项选择正序倒序不排序? -- 那个是bootstrapTable的插件!不支持!改不了!! 注意:数据上假的,效果看http请求参数进行脑补 这是boot ...

  4. 使用 JQuery 实现将 table 按照列排序

    使用 JQuery 实现将 table 按照列排序 使用 JQuery 实现将 table 按照列排序 代码如下 <!DOCTYPE html> <html> <head ...

  5. Jtable 表格按多列排序（支持中文汉字排序）

    这两天公司让做一个Jtable表格的排序,首先按A列排序,在A列相等时按B列排序,B列相等时按C列排序,ABC三列可以任意指定,最多分三列,这样的一个需求.由于我是大神,所以必须做了出来.ok,不自恋 ...

  6. easyUI datagraid的列排序

    在给datagraid做多列排序时请注意: 首先,做的是后台排序,那么需要设置: remoteSort:'true', 然后,不要添加 multiSort:'true',这个是多列一起排序无法实现.. ...

  7. EF架构~真正被封装的排序方法，支持多列排序

    回到目录 对于linq to sql 和linq to entity来说,当你把获取数据的方法封装了之后,总觉得还缺点什么,想了之后,应该是排序,但看了微软的orchard项目之后,觉得它的排序封装的 ...

  8. 自定义多列排序：C++/Java实现

    前言: 有些时候,我们在编程中会遇到多列排序的需求.假如在execle,这事儿就太easy了.不过没办法,现在就需要你用Java或者C++实现这样一个功能! 比如将下表无序的数据通过重排之后按照以下规 ...

  9. GridView多列排序

    public class WebGridView:GridView { 属性#region 属性 /**//// <summary> /// 是否启用或者禁止多列排序 /// </s ...

随机推荐

  1. phpwind主要表结构的研究随笔[1]

    最近计划做一个新闻网站,前端打算用成熟的CMS搭建,后台是mongodb+mysql做数据过滤容器和最终数据存储,选型CMS如下: dedecms:国内某知名cms,以前用过,功能强大,网上资料资料很 ...

  2. openfaas k8s 集成

    备注 k8s 1.6 以下版本与k8s 1.6 以上版本会有一些简单的区别 1. 克隆k8s  部署文档   https://github.com/openfaas/faas-netes   2. 创 ...

  3. openfaas 架构介绍

     此为官方介绍   Overview of OpenFaaS Function Watchdog You can make any Docker image into a serverless fun ...

  4. java.lang.NoClassDefFoundError: org/apache/commons/io/output/DeferredFileOutputStream异常解决方法

    使用Tomcat部署Servlet程序时,单步调试跟踪到: List<FileItem> itemList = sfu.parseRequest(request); 总是会报错:Java. ...

  5. Maven项目合并

    当多个项目之间有关联.依赖jar包有重复时,可以考虑进行合并.举例,我一开始有一个test-pilling项目,pom文件如下: <project xmlns="http://mave ...

  6. 不用jq的异步数据获取

    function LoadData(url, sign) {             var message = "";             if (sign == " ...

  7. 第17篇 shell编程基础（2）

    shell study 1.Exit StatusIf the command executed successfully (or true), the value of $? is zero. If ...

  8. python3之scrapy安装使用

    需要安装的包 pip install scrapy selenium 可能需要卸载重装的模块   lxml cryptography  cffi  pypiwin32 pip uninstall xx ...

  9. DSP SYS/BIOS开发

    https://blog.csdn.net/lg1259156776/article/details/80695318

  10. 分布式缓存系统 Memcached 数据存储slab与hashtable

    缓存数据以item为基本单元,以双链表形式存放在对应级别大小的slabclass结构的chunk中.同时该item还存放在链式hashtable中bucket中,用于提供快速查找的索引. 首先是理解缓 ...