【Semantic框架学习日志】（3）布局的排列：Grid

前言

    Semantic UI框架是前端的一个框架，最近在一直学习这个框架。从个人的感觉上来说，相比于其他框架，它的优势在于对于移动端页面和客户端页面的响应式布局，以及强大的UI组件库等。在页面组件设计上，它的组件灵活生动，不那么直板僵硬，冗余度和创造性较高。在语法方面，相较于前端其他框架，也容易上手理解。下面就是我的Semantic框架学习日志，虽然我的文笔有限，写的可能不太好，但我争取分享一些干货，也算是帮助大家一起学习共同进步。

---

---

一、布局排列有哪些？

    在官方文档中，为我们提供了以下几种布局排列方式，主要归纳如下：

布局方式	对应英文	备注
网格	Grids	对齐设计的空间，使内容似乎更自然地在页面上流动
列	Columns	网格中的所有列必须指定其宽度，以占可用行宽度总数的比例
行	Rows	行可以是显式的，带有附加元素标记，也可以是隐式的，当前一行中不再留出空间时，会自动发生
水槽	Gutters	无论宽度或连续有多少列，都保持恒定大小
负边距	Negative Margins	确保第一列和最后一列与网格外的内容齐平

    大多数的布局排列方式都要建立在Grid的基础上来实现

二、以Grid为基础的布局排列

1.Grid布局

    网格布局是一种较为基础的布局，大多数情况下都要用到这一种布局来对页面上的内容进行布局。
    使用语法：class="ui grid"
    代码如下（示例）：

<div class="ui grid">
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
</div>

    注意，在布局中，语义默认主题使用16列。

看下效果：
    当然，也可以采用嵌套的方式进行布局，代码如下，我加了颜色这样更为直观。

<div class="ui two column grid">
    <div class="column">
        <div class="ui three column grid">
            <div class="column red">123</div>
            <div class="column yellow">123</div>
            <div class="column green">123</div>
        </div>
    </div>
    <div class="column blue">123</div>
    <div class="column teal">123</div>
    <div class="column">
        <div class="ui grid">
            <div class="ten wide column pink">123</div>
            <div class="six wide column black">123</div>
        </div>
    </div>
</div>

看下效果：

---

2.响应式Grid布局

    为了节省时间，这里就给大家提供两种常用的响应式Grid布局，剩下的不太经常用，如果大家想看的话可以前往官方文档查看剩下的如何使用。

（1）Container（容器）布局

    如果要写一个响应式页面的话，不妨使用容器，它可以与网格一起使用，以提供响应式、固定宽度的容器来包装页面内容。

<div class="ui grid container">
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
</div>

看一下效果对比
拉伸：

页面缩小：

    这样就实现了基于Grid的Container响应式的布局

（2）Stackable（可堆叠）布局

    Stackable布局将自动适配移动设备，且对于移动设备的兼容性较好。

<div class="ui stackable four column grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

看一下效果对比，下图显示网页端和移动端的变化


我们发现，在移动端上面变成了堆叠的垂直排列，实现了页面的适配，今后我们要用到它，去做导航栏在移动端的页面适配。

3.Columns列布局

    官方文档看似写得多，其实归纳下来也是容易理解的，Columns列布局对于排版来说是比较常见的，说白了是在Grid的基础上实现的

<div class="ui grid">
    <div class="four wide red column">1</div>
    <div class="four wide yellow column">2</div>
    <div class="four wide pink column">3</div>
    <div class="four wide teal column">4</div>
    <div class="four wide teal column">5</div>
    <div class="four wide pink column">6</div>
    <div class="four wide yellow column">7</div>
    <div class="four wide red column">8</div>
</div>

网页端和移动端的效果如下：


这样的排列方式与其他组件结合后，后期可以实现这一种效果：

4.Row行布局

    row布局和column布局差不多，一个是行层面，一个是列层面

<div class="ui four column grid">
    <!--两列在一行-->
    <div class="two column row">
        <div class="red column"></div>
    </div>
    <!--剩下的分在另一行，共四列-->
    <div class="blue column"></div>
    <div class="orange column"></div>
    <div class="purple column"></div>
    <div class="green column"></div>
</div>

效果如下：

这是在此基础上的一个拓展，可以看一下，其实就是row和column的嵌套使用。

<div class="ui internally celled grid">
    <div class="row">
        <div class="three wide column">
            <img src="https://picsum.photos/id/1040/800/600">
        </div>
        <div class="ten wide column">
            <p>123</p>
        </div>
        <div class="three wide column">
            <img src="https://picsum.photos/id/1040/800/600">
        </div>
    </div>
    <div class="row">
        <div class="three wide column">
            <img src="https://picsum.photos/id/1040/800/600">
        </div>
        <div class="ten wide column">
            <p>123</p>
        </div>
        <div class="three wide column">
            <img src="https://picsum.photos/id/1040/800/600">
        </div>
    </div>
</div>

效果：
、