<!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. C# 对象对比是否相等 工作笔记

    需要在Linq 中对比两个对象是否相等 /// <summary> /// 定义一个点 /// </summary> class Point { public int x { ...

  2. MVVM架构的理解

    摘自维基百科 MVVM(Model–view–viewmodel)是一种软件架构模式. MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑(数据模型)的开发分离开来,这是通过置标语言或GUI代码实 ...

  3. 网站复制工具:HTTrack

    HTTrack简介: HTTrack是Kali中内置的工具,主要用于克隆网站.渗透测试人员可以利用它来在自主可控制的环境中查看该网站的完整内容:所有离线文件.同时可以利用该网站的副本来开发假冒的钓鱼网 ...

  4. MySQL表的操作02

    [1]设置非空约束(NOT NULL ,NK)--->>>目的是f防止某些字段中的内容为空 CREATE TABLE +table_name ( 属性名   数据类型   NOT N ...

  5. 部署DVWA时的一些问题和解决办法(二)

    DVWA reCAPTCHA key: Missing解决方法 编辑 dvwa/config/config.inc.php这个配置文件 $_DVWA[ 'recaptcha_public_key' ] ...

  6. Centos6.10-FastDFS-Storage.conf配置示例

    Centos610系列配置 # is this config file disabled # false for enabled # true for disabled disabled = fals ...

  7. Spring-boot JDBC with multiple DataSources sample

    Spring-Boot's auto-configurer seems good for simple applications. For example it automatically creat ...

  8. centOs安装出现No package git available的解决办法

    来源地址 [http://chinacheng.iteye.com/blog/1825538 ] centos安装git 下载源代码安装后,git clone出现“fatal unable to fi ...

  9. [Linux kali] linux kali [KDE]一些软件切换输入法无效

    #开始 今天最终是在实体机安装了Kali Kali的默认桌面是GNOME桌面 但是用久了windows桌面用这个实在是不习惯 然后看到了kali有自带KDE版本的 然后就下载了一个尝尝鲜 之前在Deb ...

  10. appium 无法通过工具定位webview页面元素的问题

    app里面页面有原生和webview的,或者H5的 1.手机百度搜索结果页面 手机百度,点击搜索输入框,输入关键字点击搜索,出来的搜索结果页面,无法通过UI automator viewer来定位元素 ...