跳转到主要内容

网络网格

当你谈论网站网格时,你的眼睛会呆滞吗? 别担心——如果你 从未使用网格系统进行设计,CMS使其变得简单. 我们对网格系统的使用 在所有UNC页面中创建统一感,使访问者更容易访问 浏览我们不断增长的网络.

12柱基础网架

ZURB的基础是我们定制的语义、可读和灵活的框架 只是为了皇冠app官方版下载. 无论页面类型如何,我们的模板都由12个等宽列组成 分布在屏幕的一部分. 你最需要知道的是 网格系统是指在调用一定大小的列时,它们通常会相等 12(但不会更多). 您可以使用不完整行,但它们的行为略有不同.

侧边栏

主节和子节中的初学者模板允许您选择是否需要 右手边栏(占4列). 打开后,剩下8列 查看主要内容. 如下所示.

内容区(全部)内容区(8列宽)
内容区(全部)offset 1
栏(全)侧边栏(3列宽)

其他选项

通过使用代码片段,您可以创建任意大小的列. 了解更多皇冠app安卓下载安装使用代码片段的信息.

四列代码片段

内容区(全部)内容区(3栏宽)
内容区(全部)内容区(3栏宽)
内容区(全部)内容区(3栏宽)
内容区(全部)内容区(3栏宽)

三列代码片段

内容区(全部)内容区(4列宽)
内容区(全部)内容区(4列宽)
内容区(全部)内容区(4列宽)

两列代码段

内容区(全部)内容区(6列宽)
内容区(全部)内容区(6列宽)

变量列代码段

使用可变列代码段创建宽度不确定的列 已经是一个片段了.

内容区(全部)内容区(5栏宽)
内容区(全部)内容区(7列宽)

内容区(全部)内容区(3栏宽)
内容区(全部)内容区(9列宽)

内容区(全部)内容区(5栏宽)
内容区(全部)内容区(4列宽)
内容区(全部)内容区(3栏宽)

默认代码片段构建的列将在中等和较小的范围内中断或崩溃 设备. 您可以使用可变列代码片段在小、中 还有大网格.

在小屏幕上

小屏幕可能包括手机. 从技术上讲,任何屏幕尺寸都有一个最大值 宽度40em(或640px).

小列
小屏幕上的小栏目

中列
小屏幕上的中列

大列
小屏幕上的大栏目

在中型屏幕上

带有 宽度在40之间.063em (641px)和64em (1024px). 手机横屏 还有一些药片.

小列
小列在中等屏幕上

中列
中屏中列

大列
中屏大栏目

在大屏幕上

64之间的任何显示.063em (1025px)和90em (1440px),比如笔记本电脑 或者台式电脑.

小列
大屏幕上的小栏

中列
大屏幕中列

大列
大屏幕上的大栏目