Foundation 网格系统1

简介: Foundation 网格系统基于12列布局,支持响应式设计,能自动适应不同屏幕尺寸。通过 .small、.medium 和 .large 类别,可针对手机、平板和电脑等设备创建灵活的布局。每行内的列数总和需为12,如 <div class="small-12 columns"> 表示100%宽度,<div class="small-8 columns"> 和 <div class="small-4 columns"> 分别表示66.6%和33.3%宽度。

Foundation 网格系统
Foundation 网格系统为 12 列。

如果你不需要 12 列,你可以合并一些列,创建一些更大宽度的列。

Foundation 的网格系统是响应式的。 列会根据屏幕尺寸自动调整大小。在大尺寸屏幕上,可能是三列,小屏幕尺寸就可能是三个单列,按顺序排列。

网格列
Foundation 网格系统有三个列:

.small (手机端)
.medium (平板设备)
.large (电脑设备:笔记本,台式机)
以上类可以结合使用,创建更灵活的布局

基本的网格结构
以下是基本的 Foundation 网格结构实例:

实例










...

首先,创建一行 (
)。 这是一个水平的垂直列。然后添加列的数量说明 small-num, medium-num 及 large-num 类。注意:列的数量 num 加起来必须等于 12 :

实例

.small-12 yellow



.small-8 beige

.small-4 gray



.small-8 .large-9 pink

.small-4 .large-3 orange

尝试一下 »
实例中,第一行的

类为 .small-12, 这会创建 12 列(100%宽度)。

第二行创建了两个列, .small-4 的宽度为33.3% ,.small-8 的宽度为 66.6%。

第三行我们添加了额外的两个列 (.large-3 和 .large-9)。这意味着如果在大屏幕尺寸下,列就会变为 25% (.large-3) 和 75% (.large-9)的比例。同时我们也指定了小屏幕上列的比例 33% (.small-4) 和 66% (.small-8) 。这种组合的方式对于不同屏幕显示效果是非常有帮助的。

相关文章
|
传感器 监控 测试技术
Visual studio 2019常用快捷键_kaic
Visual studio 2019常用快捷键_kaic
|
6月前
|
安全 Linux 测试技术
对鸿蒙 Next 系统“成熟论”的深度剖析-优雅草卓伊凡
对鸿蒙 Next 系统“成熟论”的深度剖析-优雅草卓伊凡
133 10
对鸿蒙 Next 系统“成熟论”的深度剖析-优雅草卓伊凡
|
11月前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
264 6
|
10月前
|
监控 数据可视化
如何通过建模工具实现企业架构治理全流程管理
企业架构治理工具通过构建统一的架构语言、可视化建模、流程管理、资源整合和多场景分析,实现企业架构的全生命周期管理。该工具赋能企业数字化转型,确保业务、平台、数据及技术相互耦合闭环,提供从规划到决策的一站式服务,助力提升业务运营、优化组织管理和加速数字化建设。
217 2
如何通过建模工具实现企业架构治理全流程管理
|
存储 编解码 缓存
购买阿里云服务器如何选择实例?根据业务场景与细分场景选择实例规格
对于很多初次购买阿里云服务器的用户来说,面对众多可选择的云服务器实例规格,往往不知道如何选择,不同实例规格适用于不同的业务场景,本文为大家汇总了不同业务场景和细分场景下应该选择的主要实例规格,以及这些实例规格的主要性能和适用场景,如果你不知道如何选择阿里云服务器的实例规格,不妨根据自己的场景参考本文所推荐的主要实例规格来选择。
购买阿里云服务器如何选择实例?根据业务场景与细分场景选择实例规格
|
Oracle 关系型数据库 数据库
Oracle数据恢复—异常断电导致Oracle数据库数据丢失的数据恢复案例
Oracle数据库故障: 机房异常断电后,Oracle数据库启库报错:“system01.dbf需要更多的恢复来保持一致性,数据库无法打开”。数据库没有备份,归档日志不连续。用户方提供了Oracle数据库的在线文件,需要恢复zxfg用户的数据。 Oracle数据库恢复方案: 检测数据库故障;尝试挂起并修复数据库;解析数据文件。
|
11月前
|
Java Maven Spring
超实用的SpringAOP实战之日志记录
【11月更文挑战第11天】本文介绍了如何使用 Spring AOP 实现日志记录功能。首先概述了日志记录的重要性及 Spring AOP 的优势,然后详细讲解了搭建 Spring AOP 环境、定义日志切面、优化日志内容和格式的方法,最后通过测试验证日志记录功能的准确性和完整性。通过这些步骤,可以有效提升系统的可维护性和可追踪性。
275 1
|
存储 缓存 Ubuntu
Ubuntu apt-get 命令大全
【7月更文挑战第12天】
734 6
Ubuntu apt-get 命令大全
|
机器学习/深度学习 数据挖掘 Docker
《Docker 简易速速上手小册》第1章 Docker 基础入门(2024 最新版)
《Docker 简易速速上手小册》第1章 Docker 基础入门(2024 最新版)
239 2
|
JavaScript Java 关系型数据库
springboot社团管理系统 毕业设计-附源码
springboot社团管理系统 毕业设计-附源码