android app栅格

文章目录

• 定义
• 等宽多行
• 设置一列的宽度

• 设宽时注意事项

• 可变宽度内容
• 对准
• 合并两行（`前提是两个适应屏幕宽度的宽度之和为12`）
• 排序
• 偏移
• 套料

定义

• 栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局
• 我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。
• 在一个有限的、固定的平面上，用水平线和垂直线，将平面划分成有规律的一系列“格子”，并依托这些格子、或以格子的边线为基准线，来进行有规律的版面布局。也就是在我们的实际开发中，将一行等比例的进行划分达到我们需要的效果。

我么可以将一行的宽度进行二等分

我们也可以将一行的宽度进行三等分

以此类推，当将我们的格子进行12等分的时候,那就跟 bootstrap 中的栅格化系统一模一样了。

了解完相关的定义后，我们来深入理解一下bootstrap栅格系统吧。


bootstarp的栅格系统将一行等分为12列宽度相等的格子

以下的介绍均基于bootstrap提供的数据库，如想复制看到具体的效果需引入bootstrap数据库(包括了CSS 和 JS样式)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

下面代码中添加的 class - container可以忽略，只是起一个限制行宽度的大容器作用，不影响大局。

等宽多行

• 通过插入一个.w-100您希望列换行的位置来创建跨多行的等宽列

<div class="container">
    <div class="row">
      <div class="col">one</div>
      <div class="col">two</div>
      <div class="w-100"></div>
      <div class="col">three</div>
      <div class="col">four</div>
    </div>
</div>

上面是对应的效果图，这里也涉及到列中断¹的内容假如注释掉 class="w-100"这行的话排列的效果就会变成单行排布

设置一列的宽度

• 设置一列宽度遵循一定的原则，我们所知道的bootstrap将一行等分为12列，所以我们在设置的时候，必须保证列的比例最终加起来等于12。
• 我们可以通过计算得到每一份比例，如下：

.col-1 {width: 8.33%} .col-2 {width: 16.66%} .col-3 {width: 25%} .col-4 {width: 33.33%} .col-5 {width: 41.66%} .col-6 {width: 50%} .col-7 {width: 58.33%} .col-8 {width: 66.66%} .col-9 {width: 75%} .col-10 {width: 83.33%} .col-11 {width: 91.66%} .col-12 {width: 100%}

• （相对父级元素而言）

<div class="container">
    <div class="row">
      <div class="col-2">
         small_one
      </div>
      <div class="col-6">
        wide_one
      </div>
      <div class="col">
        small_one
      </div>
    </div>
</div>

代码效果的呈现如上，第一块占了16.66%， 第二块占了50%，第三块占了 33.33%，虽然第三块的设置并没有标明他是'col-4'但是按照计算的原则，w3 = 12 - w1 - w2，即12 - 2 -6 =4比例的话都是相对于父级元素的，这个与前面的继承有关系。

间接改变列宽的方法还有使用响应式.row-cols-x类来快速设置最能呈现内容和布局的列数，它可以确定一行可以排布的列数.。

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

row - cols - x，我们可以给 x 一个整数值，比如代码中的2，意思就是一行排布的列数为两行，所以每个 div 设置的宽度为 50%

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">混合嵌套<div>

当出现这种混合嵌套的情况下，需要看屏幕的尺寸来确定执行的代码块。有关屏幕尺寸的内容下面会有详细的介绍，如果对此有疑惑的话可以先放放。

设宽时注意事项

如果在一行中放置超过12列，则每组额外的列将作为一个单元包装到新行上

<div class="container">
    <div class="row">
      	<div class="col-9">one_tube</div>
     	<div class="col-2">two_tube</div>
     	<div class="col-6">three_tube</div>
    </div>
</div>

可变宽度内容

• 使用col-{breakpoint}-auto类可根据其内容的自然宽度来调整列的大小。
  在使用 auto类之前，我们首先来了解一下以下代码块的含义。

<div class = "col-lg-2  col-md-4  col-sm-6  col-xs-12">不同屏幕之间的转换</div>

• 根据我们网格选项²的内容, 你想让他们在不同屏幕大小的时候有不同的展示方式，可以采用混合应用的方法。
• col-xs-*和col-sm-* 和col-md-*后面跟的参数表示在当前的屏幕中 每个div所占列数。比如’col-lg-2’的意思是在屏幕尺寸大于1200px时单个 div 所占列数为2列。
• 对上面代码的解读：当屏幕尺寸大于1200px 的时候，用 col-lg-2 类对应的样式；在 992px 到 1200px 之间的时候，用 col-md-4 类对应的样式；在 768px 到 992px 之间的时候，用 col-sm-6 类对应的样式；小于 768px 的时候，用 col-xs-12 类对应的样式

<div class="container">
    <div class="row">
      <div class="col">
        the first one
      </div>
      <div class="col-md-auto">
        Variable width content
      </div>
      <div class="col col-md-2">
        the third one
      </div>
    </div>
  </div>

’ col - md - auto’的意思其实是在屏幕尺寸在 992px 到 1200px 之间的时候，根据内容的宽度来确定需要占有的列数（其实也就是占有父级宽度的百分比）。

对准

• 对准分为水平对齐与垂直对齐。

1. 水平对齐（该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐）

<div class="container">
    <div class="row justify-content-start">
      <div class="col-4">
         left
      </div>
    </div>

	<div class="row justify-content-center">
     	<div class="col-4">
        	center
     	</div>
	</div>

	<div class="row justify-content-end">
     	<div class="col-4">
       		right
     	</div>
   	</div>
</div>

start, center, end分别代表居左，居中，居右三个属性

<div class="container">
    <div class="row justify-content-around">
      <div class="col-4">
        one_con
      </div>
      <div class="col-4">
        two_con
      </div>
    </div>
    
    <div class="row justify-content-between">
      <div class="col-4">
        one_con
      </div>
      <div class="col-4">
        two_con
      </div>
    </div>
  </div>

• around属性左右两边都留有一定相等的空间（假如只有一个元素的话会居中），然后各块级元素在行中以一定间距依次排布。
• between属性规定第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐。然后剩余的弹性项分布在该行上，相邻项目的间隔相等。（当只有一个元素的时候，则默认居左排列）
  
  

2. 垂直对齐

<div class="container">
  	<div class="row">
    	<div class="col align-self-start">
      		One
    	</div>
   		 <div class="col align-self-center">
      		Two
    	</div>
    	<div class="col align-self-end">
      		Three
    	</div>
  	</div>
</div>

• flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
• flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
• center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）
  
  

3. 左右对齐的另一种方法( ml-auto/ mr-auto)

• ml-auto 实现 块元素向右对齐
• mr-auto 实现 块元素想左对齐

<div class="row">
      <div class="col-md-4 ml-auto">向右对齐</div>
</div>

向左对齐的代码实现同理

合并两行（前提是两个适应屏幕宽度的宽度之和为12）

• no - gutters属性可以使用删除预定义网格类别中列之间的装订线(其实就是打破块级元素独占一行的属性，实现两行元素的合并)
• 我的屏幕是Medium型，如果看不到效果的话可能是屏幕尺寸的差异，可适当调整一下宽度

<div class="row no-gutters">
    <div class="col-sm-6 col-md-8">1号</div>
    <div class="col-6 col-md-4">2号</div>
</div>

排序

<div class="container">
    <div class="row">
      <div class="col order-last">
        The first 
      </div>
      
      <div class="col">
        center
      </div>
      
      <div class="col order-first">
        The last
      </div>
    </div>
</div>

偏移

• 偏移采用的是 .offset-x 网格类，它使元素向右移动 x 个列向量。

<div class="container">
    <div class="row">
      <div class="col-md-4">初始的位置</div>
      <div class="col-md-4 offset-md-4">移动后的位置</div>
    </div>
</div>

套料

• 大家可能会想，什么是套料？其实套料是将内容与默认网格嵌套，也就是在原有的网格中嵌入新的表格。（原则：嵌套行应包括一组总计不超过12个或更少的列）

<div class="container">
    <div class="row" style="background-color: gray; height: 300px;">
      <div class="col-sm-9">
        第一个网格
        <div class="row" style="background-color: orange;">
          <div class="col-8 col-sm-6">
            第二个网格
          </div>
          <div class="col-4 col-sm-6">
            第二个网格
          </div>
        </div>
      </div>
    </div>
</div>

---

1. 列中断的定义：在特定的断点对某应用进行中断。 ↩︎
2. 网格选项的定义：(1)Bootstrap使用ems或rems定义大多数大小，而pxs用于网格断点和容器宽度。这是因为视口宽度以像素为单位，并且不会随字体大小而变化。(2)借助便捷的表格，简单地了解Bootstrap网格系统在多个设备上如何工作。 ↩︎