Bootstrap3实用教程
2.2.5 列排序
阅读(

Bootstrap基础

Bootstrap全局样式

概述

栅格系统

列嵌套

列平移

布局实例

工作原理

列排序

Bootstrap 网格系统中一个非常人性化的特性,就是使用 .col-md-push-* 和 .col-md-pull-* 类来改变列的顺序。push 将元素向右推动 * 指定的列数,pull 将元素向左拉动 * 指定的列数,* 的取值范围是从 1 到 11。

这个特性允许你以一种顺序定义列,然后以另一种顺序显示列,是对SEO非常友好的一个特性,深受SEO人员的喜爱。

假设一个页面有左右两栏:左栏是次要内容,使用 aside 元素定义;右栏是主要内容,使用 main 元素定义。在定义HTML代码时,人们常常将主要内容的 main 元素放在前面,将次要内容的 aside 元素放在后面,这样搜索引擎首先看到的是主要内容,对搜索引擎非常友好。如:

<div class="row">
  <main class="col-md-9">main</main>
  <aside class="col-md-3">aside</aside>
</div>

运行结果如图 2‑8所示:

默认的列排序
图2-8 默认的列排序

显然,这不是我们想要的结果,我们希望两栏的顺序交换一下。此时,就可以使用 .col-md-push-3 将 main 元素向右推动 3 列,使用 .col-md-push-9 将 aside 元素向左拉动 9 列,很容易地让这两列的顺序互换。如:

<div class="row">
  <main class="col-md-9 col-md-push-3">main</main>
  <aside class="col-md-3 col-md-pull-9">aside</aside>
</div>

运行结果如图 2‑9所示:

列排序
图2-9 列排序

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验