【10】了解Bootstrap栅格系统基础案例(5)

这次我们来说下列排序:

通过使用 .col-md-push-*.col-md-pull-* 类就可以很容易的改变列(column)的顺序。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <!-- Bootstrap不支持IE的兼容模式,加入此标签以确保在每个被支持的IE浏览器中保持最好的页面展现效果 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 由于Bootstrap 3是移动设备优先,加入此标签是为了确保适当的绘制和触屏缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap-Template-07</title>
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
.show-grid { margin-top: 15px; }
.show-grid [class^="col-"] {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  border: 1px solid #ddd;
}
    </style>
</head>
<body>
<div class="container">

<h1>案例:列排序<small>.col-md-push-* (推)和 .col-md-pull-*(拉)</small></h1>
<div class="row show-grid">
  <div class="col-md-3">.col-md-3</div>
  <div class="col-md-3">.col-md-3</div>
  <div class="col-md-3">.col-md-3</div>
  <div class="col-md-3">.col-md-3</div>
</div>
<div class="row show-grid">
  <div class="col-md-3 col-md-push-3">.col-md-3 .col-md-push-3</div>
</div>
<div class="row show-grid">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

</div>
    <!-- 所有 Bootstrap 插件都依赖 jQuery,因此jQuery必须在Bootstrap之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

看下运行效果图:

可以看出,我定义了三行。

第一行被平均分成4份,每份占有3列。这一行主要是为了与下面两行进行对照的。

第二行里只有一个元素且占有3列,然后对此元素也添加了.col-md-push-3的样式类。(让占有3个列的元素又向右移动了3列,那么现在就是占据了4、5、6这3个列。)

第三列被分为两份,第一份占有9列(使用col-md-push-3向右移动3列),第二份占有3列(使用col-md-pull-9向左移动9列)。

【10】了解Bootstrap栅格系统基础案例(5)

时间: 2024-10-14 20:00:26

【10】了解Bootstrap栅格系统基础案例(5)的相关文章

【9】了解Bootstrap栅格系统基础案例(4)

这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列). <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!--

【8】了解Bootstrap栅格系统基础案例(3)

这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度. 废话不多说,直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8&

【7】了解Bootstrap栅格系统基础案例(2)

ps.这一次要说的是"Responsive column resets",但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己,要是大家有其他好的说法,请告诉我. ================================================================================================= Responsive column resets就是在某

巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Bootstrap的中文官网首页为模板进行展示其栅格布局的使用方法以及相关知识点.相信在看完这篇文章之后,你完全可以轻松使用栅格布局. 网站效果图如下所示: PC版: 移动版: 1.栅格系统(布局) Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加

bootstrap栅格系统详解

在百度前端学院做任务的时候,看到有关于bootstrap的栅格系统的知识于是就在网上百度了一番,下边的网址是关于bootstrap栅格系统的详细解析,https://segmentfault.com/a/1190000000743553. http://www.cnblogs.com/JerryTao/p/5476027.html. http://blog.csdn.net/z742182637/article/details/50466674. 了解之后栅格系统就可以相互嵌套了.这里有我写的d

Bootstrap 栅格系统(布局)

1.栅格系统(布局)Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再

Bootstrap栅格系统用法介绍

 1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系统叫做布局.它就是通过一系列的行(row)与列(column)的组合创建页面布局,然后你的内容就可以放入到你创建好的布局当中.下面就简单介绍一下Bootstrap栅格系统的工作原理: 网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的)

第二百三十五节,Bootstrap栅格系统

Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动设备优先 在 HTML5 的项目中,我们做了移动端的项目.它有一份非常重要的 meta,用于设置屏 幕和设备等宽以及是否运行用户缩放,及缩放比例的问题.

Bootstrap 栅格系统 理解与总结

Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快的熟练运用Bootstrap. 这里,我就对Bootstrap中非常重要好用的栅格系统做一个以实例为向导的总结: (1)第一步:创建栅格系统的容器 <div class="container-fluid"> <div class="row"> .