Bootstrap 栅格布局

chnmagnus 发布于2019-08-30 13:14 / 3124人阅读

摘要：类似和这种预定义的类，可以用来快速创建栅格布局。栅格系统组成的重要部分是使用了。必然导致了脱离文档流对布局的影响。

栅格布局系统：

思想：一个表达式足以描述，百分比占位 + 多媒体查询 + float + relative

Bootstrap栅格系统的工作原理：

row必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

通过“行（row）”在水平方向创建一组“列（column）”。

你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

栅格参数：

从堆叠到水平排列


  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1
  .col-md-1

流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

...

移动设备和桌面屏幕

.col-xs-*
.col-md-*

混合使用，xs、md依次添加(权重问题)。

手机、平板、桌面

支持平板可以添加

.col-sm-*

混合使用，xs、sm、md依次添加(权重问题)。

多余的列（column）将另起一行排列

如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

column reset

栅格系统组成的重要部分是使用了float。必然导致了dom脱离文档流对布局的影响。解决方法：添加.clearfix清除浮动对布局的影响


  .col-xs-6 .col-sm-3
  .col-xs-6 .col-sm-3

  

  .col-xs-6 .col-sm-3
  .col-xs-6 .col-sm-3

列偏移

使用.col-md-offset-*类可以将当前列向右侧偏移，css表达式为margin-left: xx%


  .col-md-4
  .col-md-4 .col-md-offset-4


  .col-md-3 .col-md-offset-3
  .col-md-3 .col-md-offset-3


  .col-md-6 .col-md-offset-3

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm- 元素到已经存在的 .col-sm- 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

列排序

通过使用 .col-md-push-和.col-md-pull-类就可以很容易的改变列（column）的顺序。
原理：利用relative，可以理解为

.col-md-push-3 => 当前位置 向右移动
left = 100/12*3 % => 效果为：
left : 25%

.col-md-pull-9=> 当前位置 向左移动
right = 100/12*9 % => 效果为：
right : 75%

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115408.html

Bootstrap4响应式布局之栅格系统

摘要：前面说了的下载和简单使用，现在我们接着往下学习，的响应式布局主要依靠栅格系统来实现的。好了，栅格系统暂时先介绍到这了，有什么不懂的可以给老留言哦。前面说了Bootstrap4的下载和简单使用，现在我们接着往下学习，Bootstrap4的响应式布局主要依靠栅格系统来实现的。面老K先来讲解一下Bootstrap4的栅格系统，让你能够更快的了解Bootstrap4.（PS：更详细的介绍请访问原K先...

Donald 2019-04-23 13:11 评论0 收藏0
如何使用 Bootstrap 搭建更合理的 HTML 结构

摘要：本文的目的就是介绍如何使用搭建常用的布局，并保证布局具有合理的结构。所以，上面例子的正确结构如下这是我工作过程中见过的最多的一种错误，必须格外注意。 showImg(http://images2017.cnblogs.com/blog/999445/201802/999445-20180212224801781-748317715.jpg); 前言 Bootstrap 的成功不仅在于其...

gclove 2019-08-01 18:37 评论0 收藏0
Bootstrap网格系统

摘要：栅格系统中的列是通过指定到的值来表示其跨越的范围。实例下图是一个栅格系统，共有四行。然后在根目录中，使用命令，可以自动将源代码编译成，放在目录中。什么是Bootstrap Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，它包括HTML,CSS,JS等。它是由Twitter开发，现在成为Github上最为流行的前端开发框架。它提供了一套响应式，移动设备优先的流式栅格...

ISherry 2019-08-30 13:07 评论0 收藏0
100行less实现bootstrap的12栅格布局

摘要：实现的栅格布局，其实代码不止行，大概多行吧使用过的都知道，的强大的栅格系统在响应式布局中这栅格布局是非常有用的。 less实现bootstrap的12栅格布局，其实代码不止100行，大概100多行吧使用过bootstrap的都知道，bootstrap的强大的12栅格系统；在响应式布局中这12栅格布局是非常有用的。有时候做个简单的页面并不想把所有整个bootstrap引入到页面中，于是...

jiekechoo 2019-08-29 12:53 评论0 收藏0