Semantic UI 之 网格 grid
Semantic UI 在宽度上将网页分成16份
本博客对应的代码：Semantic UI示例代码
准备工作
本博客网页的代码框架为：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>信息</title><link rel="stylesheet" href="semantic-ui/semantic.min.css"><script type="text/javascript" src="js/jquery3.3.1.js"></script><script type="text/javascript" src="semantic-ui/semantic.min.js"></script></head><body><!-- 在此处编写不同信息的代码 --></body>
</html>
本博客下面示例中每个折叠隐藏部分的代码为：
<div class="column"><div class="ui red statistic"><div class="value">17</div><div class="label">COLUMN</div><div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet atque consequatur hic illo labore odio, perspiciatis voluptas. Animi aut doloribus molestiae nam optio similique? Alias aperiam enim reiciendis sed velit.</div></div>
</div>
网格系统
代码：
效果：
手工指定网格的列数
代码：
效果：
单独指定每栏占的宽度
代码：
效果：
手工指定行
代码：
效果：
分隔线
column分隔线
代码：
效果：
row分隔线
代码：
效果：
vertical 分隔线
代码：
效果：
celled分隔线
代码：
效果：
internally celled分隔线
代码：
效果：
等分宽度的网格
代码：
效果：
Doubling与Stackable
推荐使用doubling让列的宽度在小尺寸的屏幕上变为原来的2倍显示，使用stackable让列在手机上堆叠显示，通过computer/mobile/tablet来指定在不同的设备止显示不同的内容
doubling
代码：
效果：
stackable
代码：
效果：
设置不同列在不同屏幕上的可见性
代码：
效果：
指定列在不同的屏幕上显示不同的宽度
代码：
<div class="ui grid"><!--手机上占16个宽度，在平板上占8个宽度，在电脑上占4个宽度--><div class="sixteen wide mobile eight wide tablet four wide computer column"><div class="ui red statistic"><div class="value">8</div><div class="label">COLUMN</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet atque consequatur hic illo labore odio, perspiciatis voluptas. Animi aut doloribus molestiae nam optio similique? Alias aperiam enim reiciendis sed velit.</div></div></div>
</div>
效果：
对齐
代码：
效果：
拉伸
代码：
<div class="ui stretched grid"><div class="column"><div class="ui segment"><div class="ui red statistic"><div class="value">1</div><div class="label">COLUMN</div><div>nam optio similique? Alias aperiam enim reiciendis sed velit.</div></div></div></div><div class="column"><div class="ui red statistic"><div class="value">2</div><div class="label">COLUMN</div><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet atque consequatur hic illo labore odio, perspiciatis voluptas. Animi aut doloribus molestiae nam optio similique? Alias aperiam enim reiciendis sed velit.</div></div></div><div class="column"><div class="ui segment"><div class="ui red statistic"><div class="value">3</div><div class="label">COLUMN</div><div>nam optio similique? Alias aperiam enim reiciendis sed velit.</div></div></div></div>
</div>
效果：
间隔
默认
代码：
效果：
默认间距
代码：
效果：
垂直间距
代码：
效果：
水平间距
代码：
效果：
Column间的间距
代码：
效果：
Semantic UI 之 网格 grid相关推荐
- semantic ui框架学习笔记三
网格系统 基本网格 <div class="ui grid"><div class="column"></div><d ...
- semantic ui html5,css中什么是Semantic UI框架？
什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...
- 4 数据可视化大屏 - 布局： BootStrap 之网格Grid
目录 一.最简单的例子 二.网格grid特性 三.自动布局列 1.列自动等宽度 col 2.设置某一列宽度,其余列自动等宽度 3.可变宽度内容 col-{ breakpoint }-auto 四.响应 ...
- 【项目实战】个人博客（SpringBoot，SSM，thymeleaf，Semantic UI）——从设计思路到部署一站式教学
一.前言 1.项目背景 此项目并非原创,项目原型是李仁密老师的作品,具体的教学视频来自b站https://www.bilibili.com/video/BV1nE411r7TF,不过up主貌似也是搬运 ...
- oracle 12c dg新特性,oracle 12c：新特性-网格(Grid)基础架构的增强
oracle 12c:新特性-网格(Grid)基础架构的增强,传统标准集群和Flex集群. Flex 集群 Oracle 12c 在集群安装时支持两类配置:传统标准集群和Flex集群.在一个传统标准集 ...
- jQuery Mobile中网格grid样式ui-grid-*
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有class选项 jQuery Mobile中网格grid样式 网格中的列是等宽的(合计是 100%),没有边框.背景.margin ...
- php ci框架后台管理,ci: 羽翼后台管理平台是一个简单的博客系统，后端基于CodeIgniter，前端基于Semantic UI 2.2.10...
羽翼后台管理平台(博客系统) 羽翼的由来 羽翼的故事是9月20日的晚上,我突然就想到--造翼者小说.我通过自己构思不少的东西.羽毛代表着轻松.纯洁和神圣的:翼代表着升天和梦想,两者在一起的含义:带着一 ...
- Semantic UI 之 图标 icon
第一步:创建项目 添加JQuery和Semantic UI包.创建icon.html页面: 第二步:icon.html页面 <!DOCTYPE html> <html lang=&q ...
- 超级强大的网格grid布局
超级强大的网格grid布局 一.概述 二.基本概念 1. 容器和项目 2.行和列 3.单元格 4.网格线 三.容器属性 1. display 属性 2.grid-template-columns 属性 ...
最新文章
- java timer.schedule如何控制执行次数_Java 分布式任务调度平台：PowerJob 快速开始+配置详解...
- 又一壮举！GPT-3首次完成剧本创作，AI解决创造性问题的能力正迅速提升
- 使用.NET中的Action及Func泛型委托
- SQL 列转行，即多行合并成一条
- 每天一道LeetCode-----最长无重复子串
- ArduinoYun教程之ArduinoYun硬件介绍
- 如何解决ajax跨域问题（转）
- oracle收发邮件存储过程
- vue脚手架搭建项目_复习之vue脚手架搭建项目的两种方法
- sp 导出unity哪个_GitHub上发现的一个导出Unity3D场景数据的工具
- 项目支持规划标准文档编写要点
- 用VS2008做博客￥(^_^)￥
- python中使用函数的优点_在python中使用自定义初始化函数而不是`__init__`的好处...
- 真正优秀的领导者，无非是做好这2件事
- CrossApp 0.3.8 发布，跨平台移动App开发引擎
- PWM占空比控制电机转速
- 11 Component Composition
- Tomcat配置优化(一)
- Microsoft SQL Server 2008R2企业版64位（带密钥）
- k8s之无状态服务Deployment1
热门文章
- OmniDet: Surround View Cameras based Multi-taskVisual Perception Network for Autonomous Driving 论文精读
- 《Maven实战》读书笔记
- 不越狱就能监控苹果手机? iCloud备份成漏洞
- IDEA中文棱形乱码错误解决方法--控制台中文输出棱形乱码
- 【Python】广义线性回归（多项式回归）——东北大学数据挖掘实训一（3）
- POJ 2253 Frogger（floyd dijkstra spfa）
- ResultSet基本使用
- 基于Qt的实时温度传输系统
- 大笨钟：微博上有个自称“大笨钟V”的家伙，每天敲钟催促码农们爱惜身体早点睡觉。
- 驱动中有关ioctl[宏]_IO, _IOR, _IOW, _IOWR 宏的用法与解析