布局

常见布局

Pure 的设计理念：可在每个 Web 项目中使用。为了展示这一点，我们制作了一些充分利用 Pure 的常见布局。这些布局具有响应能力，且无需 JavaScript（特定菜单交互除外）。

博客

展示具有帖子列表的博客页面的布局示例。

• 基础
• 网格
• 按钮
• 菜单

查看源代码

电子邮件

展示响应式电子邮件布局的布局示例。

• 基础
• 网格
• 按钮
• 菜单

查看源代码

图片库

展示响应式图片库的布局示例。

• 基础
• 网格
• 表单
• 按钮
• 菜单

查看源代码

登陆页面

展示响应式产品登陆页面的布局示例。

• 基础
• 网格
• 表单
• 按钮
• 菜单

查看源代码

定价表

展示响应式定价表的布局示例。

• 基础
• 网格
• 按钮
• 菜单

查看源代码

响应式侧边菜单

具有侧边菜单的布局示例，该侧边菜单在移动设备上隐藏，就像 Pure 网站一样。

• 基础
• 网格
• 菜单

查看源代码

响应式水平到垂直菜单

一套水平菜单，可以在小窗口宽度下切换为垂直菜单且隐藏。

• 基础
• 网格
• 菜单

查看源代码

响应式水平到可滚动菜单

展示可在小窗口宽度下隐藏，且在显示时可滚动的水平菜单。

• 基础
• 菜单

查看源代码