前言
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>
效果:
、