<!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. laravel Excel导入导出

    1.简介 Laravel Excel 在 Laravel 5 中集成 PHPOffice 套件中的 PHPExcel,从而方便我们以优雅的.富有表现力的代码实现Excel/CSV文件的导入和导出. 该 ...

  2. java.lang.IllegalStateException: Illegal access: this web application instance has been stopped already. Could not load [META-INF/services/com.alibaba.druid.filter.Filter].

    九月 11, 2019 2:56:36 下午 org.apache.catalina.loader.WebappClassLoaderBase checkStateForResourceLoading ...

  3. linux 网络数据收发网络流量监控

    网卡流量 1.iftop命令 iftop可以用来监控网卡的实时流量(可以指定网段).反向解析IP.显示端口信息.TCP/IP连接等官网:http://www.ex-parrot.com/~pdw/if ...

  4. Flask 学习之flask入门

    一．Flask的简单介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请 ...

  5. java反射--超级好用的方法

    1.根据方法名,获取类的对应的方法 Method changeSessionIdMethod = ReflectionUtils.findMethod(HttpServletRequest.class ...

  6. 小杨排队（dp)

    链接:https://ac.nowcoder.com/acm/contest/3667/J 题目描述 小阳想要买个东西,然后就去了商店,发现进商店需要排队(生意太火爆!),然后就开始漫长的等待,他觉得 ...

  7. MyBatis逆向工程的使用（非插件方式）

    一.概述 MyBatis是目前流行的优秀持久层框架,其逆向工程更是大大缩减了开发时间.所谓逆向工程,指的是mybatis根据数据库设计好的表,自动生成对应model.mapper及mapper.xml ...

  8. 开放应用模型操作指南（一）| 云服务一键接入 OAM 体系

    作者 | 邓洪超  阿里云容器平台软件工程师 导读:Open Application Model(OAM)是阿里云联合微软等国际顶级技术团队联合发布的开放应用模型技术.旨在通过全新的应用定义.运维.分 ...

  9. 【Go语言系列】1.3、GO语言简介：Go语言开发的知名项目

    下面列举的是原生使用Go语言进行开发的部分项目.1.DockerDocker 是一种操作系统层面的虚拟化技术,可以在操作系统和应用程序之间进行隔离,也可以称之为容器.Docker 可以在一台物理服务器 ...

  10. mac下Red Hat 7.4服务器初始化

    物料:VMware Fusion for Mac版     rhel-server-7.4-x86_64-dvd.iso 通过VMware安装好虚拟机,打开终端: 1.通过ifconfig查看ip和网 ...