semantic-ui 容器与栅格
2023-09-14 08:56:53 时间
semantic中可以指定one-sixteen这16个单词来指定网格column所占的长度。也就是说,在网页中,一行最多只有16个column,超过16个之后,自动移到下一行。
栅格可以使用i,div,span标签,尽量不要使用button和p标签
1、定义栅格
注意,单独将标签的class设置为column是不行的,因为这些标签要位于一个class为ui grid的标签下才行。
<div class="ui grid"> <div class="column red"></div> <div class="column yellow"></div> </div>
2、指定栅格长度
semantic中可以指定one-sixteen这16个单词来指定网格column所占的长度,光是数量单词还不行,还要使用wide。
<div class="ui grid"> <i class="two wide column red"></i> <i class="three wide column yellow"></i> </div>
3、栅格嵌套
栅格嵌套和按钮嵌套很相似。需要注意的是:
1、嵌套的时候,每一个要进行嵌套的栅格都要使用ui grid,就像下面的第二个two wide column。
2、每一个ui grid都会在内部分成16份,没错,即使将一个two wide column中间嵌套,中间也会被分成16份,而不是两份。16份才能填满。
<div class="ui grid"> <div class="two wide column red"></div> <div class="two wide column"> <div class="ui grid"> <div class="four wide column green"></div> <div class="four wide column black"></div> <div class="four wide column green"></div> <div class="four wide column black"></div> <div class="four wide column green"></div> <div class="four wide column black"></div> <div class="four wide column green"></div> <div class="four wide column black"></div> </div> </div> <div class="two wide column blue"></div> </div>
相关文章
- set与map容器
- 固化的Maven依赖和嵌入式Servlet容器
- Kubernetes 学习(十二)Kubernetes 容器持久化存储(二)
- linux export命令找不到_docker执行容器内的shell
- set/map/multiset/multimap-C++容器
- 使用容器快速配置c/c++开发调试环境
- 大厂都在玩的容器技术到底是什么?
- 【prometheus】-06 Kubernetes云原生监控之cAdvisor容器资源监控
- 【Java AWT 图形界面编程】Container 容器 ③ ( ScrollPane 可滚动容器示例 )
- Docker容器的创建、启动、和停止详解架构师
- C++queue容器学习(详解)编程语言
- docker-容器编排管理工具docker compse基础
- 从零开始运行Redis容器(怎么启动redis容器)
- Redis 容器化是否真的必要(redis需要容器化吗)