开发手册 欢迎您!
软件开发者资料库

Foundation - The Grid

基础网格 - 学习基础从简单和简单的步骤开始,从基本到高级概念,包括概述,安装,入门项目,厨房水槽,全局样式,Sass,JavaScript,JavaScript实用程序,媒体查询,网格,Flex网格,表单,可见性类,基本排版,排版助手,按钮,按钮组,关闭按钮,滑块,开关,导航,菜单,下拉菜单和向下钻取菜单,手风琴菜单,响应导航,麦哲伦,分页,面包屑,容器,手风琴,标注,下拉菜单-panes,媒体对象,画布,显示模态,表格,标签,Flex视频,标签,轨道,进度条,工具提示,插件,遵守,均衡器,交换,Toggler,粘滞,Sass功能和Mixins,运动UI。

描述

基础网格系统通过页面最多可扩展到12列.网格系统用于通过一系列容纳内容的行和列来创建页面布局.

网格选项

下表简要介绍了Foundation网格系统如何在多个设备中工作.


小型设备电话(< 640px)中型设备平板电脑(> = 640px)大型设备笔记本电脑&桌面(> = 1200px)
网格行为始终水平折叠开始,水平在断点之上折叠开始,水平在断点之上
类前缀.small  -  *.medium  -  *.large  -  *
列数121212
Nestable
抵消
列排序

基础网格的基本结构

以下是基础网格的基本结构 :

   
   
      ...

  • 首先,创建一个类来创建水平组列.

  • 内容应放在列中,只有列可能是行的直接子项.

  • 通过指定要跨越的十二个可用列的数量来创建网格列.例如,对于四个相等的列,我们将使用 .large-3

以下是三个类用于基础网格系统 :

Sr .No.基本网格类&说明
1Large

large  -  * 类用于大型设备.

2媒体

medium  -  * 类用于中型设备.

3

小 -  * 类用于小型设备.

高级网格

以下是Foundation中使用的高级网格格式.

Sr.No.Advanced Grids&说明
1合并列/行

类用于获取全宽度列用作容器的相同元素.

2嵌套

我们可以嵌套网格另一列内的列.

3抵消

使用 large-offset  -  * 小偏移 -  * 类,你可以将列移到右边.

4不完整的行

当行不包含列时,Foundation会自动向右浮动最后一个元素ns最多12个.

5折叠/取消折叠行

使用媒体查询大小,折叠和取消折叠类包含在row元素中以显示填充.

6中心列

通过包含类在列中以小中心为单位,您可以将列设置在中心.

7来源订购

源排序类用于在断点之间移动列.

8块网格

块网格用来分裂内容.

建筑语义

使用SASS mixins集合,生成网格CSS,用于构建您自己的语义网格.有关详细信息

SASS参考

以下是Foundation中使用的网格的SASS参考.

Sr.No.Basic Grids&说明
1变量

使用sass变量我们可以修改该组件的默认样式.

2Mixins

最终的CSS输出是使用mixin构建的.