企业官网建设流程全解析

BootMetro 高级组件完整指南：快速掌握 Panorama Hub、Pivot 与 ListView 三大交互核心

【免费下载链接】bootmetroSimple and complete web UI framework to create web apps with Windows 8 Metro user interface, based on Bootstrap 2.项目地址: https://gitcode.com/gh_mirrors/bo/bootmetro

BootMetro 是一个基于 Bootstrap 2 的轻量级 Web UI 框架，帮助开发者用纯 HTML/CSS/JS 打造 Windows 8 Metro 风格的 Web 应用。它的三大高级交互组件——Panorama Hub、Pivot 与 ListView——分别对应 Metro 应用中的磁贴枢纽页、标签切换视图与数据列表视图。本文面向新手，带你用最短时间看懂并用好这三块"拼图"，拼装出完整的 Metro 风格应用。

💡 小提示：项目文档中把这三个组件称为 "advanced components"，官方演示页都在src/目录下，边看文章边打开对照效果最佳。

一、为什么选择 Metro 风格：BootMetro 的定位

BootMetro 的设计目标很明确：不在 Windows 8 上运行，也能拥有 Windows Store 应用的质感（参见 README.md 中的项目说明）。它特别适合内网管理系统、企业门户这类"内容多、交互轻"的场景。

三大核心组件的分工可以这样记：

理解了分工，后面逐个拆解就不会迷路。

二、Panorama Hub：像 Windows 8 开始屏幕一样的磁贴枢纽

1. 认识 Hub 的页面结构

Panorama 的核心思想是把首页切成若干**区块（panorama-section）**排成一行，整体宽度超出屏幕，通过横向滚动"翻页"浏览——这正是 Windows 8 开始屏幕的交互方式。

页面骨架来自 templates/demo/hub.mustache 模板，结构只有三层：

• div.metro.panorama—— Panorama 容器
• div.panorama-sections—— 所有区块的横向容器
• div.panorama-section—— 每个区块，内部随意放磁贴（tile）

配套的滚动按钮#panorama-scroll-prev/#panorama-scroll-next由插件自动控制显隐：翻到第一页隐藏"上一屏"，翻到最后一页隐藏"下一屏"，这个细节可以看看 src/assets/js/bootmetro-panorama.js 的setButtons方法。

2. 一键开启键盘、滚轮与视差滚动

Panorama 的默认配置非常贴心，默认值定义在这里：

• showscrollbuttons: true—— 显示左右滚动按钮
• keyboard: true—— 支持键盘 ← → 方向键翻页
• mousewheel: true—— 鼠标滚轮上下滚动 = 左右翻页
• parallax: false—— 开启后背景图跟随区块半速位移，产生视差效果

官方演示 src/demo-hub.html 中开启parallax: true后，页面背景的图案会随翻页缓慢移动，层次感立刻出来。磁贴本身有丰富的模板（宽磁贴、图片磁贴、应用磁贴等），直接复制 demo-hub.html 里现成的tile写法即可。

三、Pivot：一个类就搞定的标签切换控件

1. Pivot 的极简结构

Pivot 是模仿 Windows Phone 8 的 Pivot 控件，用顶部大字号标签切换下方内容面板，切换时带左右滑入滑出动画。整个结构只有三块（完整示例见 src/docs-advanced-components.html）：

• div.pivot-headers—— 标签栏，每个a带data-pivot-index指定面板序号
• div.pivot-items—— 面板容器
• div.pivot-item—— 单个面板，当前显示的面板加active类

样式核心在 less/bootmetro/pivot.less：非激活面板默认display: none，切换时对left属性做 0.4s 的ease-in-out过渡，就形成了平滑的横向滑入效果。

2. 零 JavaScript 的数据属性激活方式

Pivot 内置了 />

四、ListView：网格与列表两种布局的数据展示

1. 网格布局：横向铺开的磁贴卡片

官方文档对 ListView 的定义引用了 Windows 8 UX 指南：用于展示包含多项数据的条目集合（出处：docs-advanced-components.html）。每项由三部分组成：

• div.listview-item—— 条目容器，可用bg-color-blue等类换肤
• img.listview-item-object—— 左侧 60x60 的对象图标/图片
• div.listview-item-body—— 标题 + 正文，配two-lines/three-lines类控制文字截断行数

加上grid-layout类后，条目会像磁贴一样横向铺满，适合图片库、应用列表；条目上加selected类即进入选中态，选中与悬停样式定义在listviews.less。

2. 列表布局与"列表-详情"经典双栏

把grid-layout换成list-layout，条目就变成单列纵向滚动——这是 Metro 里最经典的"左列表、右详情"信息架构。官方给出的完整范例是 src/demo-list-detail.html：

• 左栏span5：tile-listviewitem-container里的列表，每项是缩略图 + 标题 + 副标题 + 摘要
• 右栏span7：article.tile-listviewitem-detail，放当前条目的大图、完整标题与正文

这种双栏模式让"浏览"和"阅读"互不干扰，是内网站点文章阅读页、邮件列表页的万能结构。模板版本在 templates/demo/list-detail.mustache，替换占位符后可以直接当项目页面骨架用。

五、三大组件合体：拼装一个完整的 Metro 应用

单独看每个组件都不复杂，真正的威力在于组合。一个典型 Metro 应用的导航闭环是：

1. Panorama Hub 作首页：磁贴按"精选图片 / 精选文章 / 应用入口"分区块，用户横向浏览
2. 点击磁贴进入内页，Pivot 承担页内切换：比如"详情 / 数据表 / 图表"三个面板，标签栏一行搞定
3. ListView 承载数据：列表-详情双栏展示条目，selected类标记当前项

页头的返回按钮（win-backbutton）与 Charms 设置栏（主题切换见 demo-hub.html）补齐了 Windows 8 的完整交互隐喻。想本地跑起来看效果，参考 Gruntfile.js 安装依赖后执行grunt构建即可，开发服务器脚本在 server/server.js。

六、核心文件速查表

📌总结：Panorama Hub 管"逛"，Pivot 管"切"，ListView 管"看"。三者都遵循 Bootstrap 的 contenteditable="false">【免费下载链接】bootmetroSimple and complete web UI framework to create web apps with Windows 8 Metro user interface, based on Bootstrap 2.项目地址: https://gitcode.com/gh_mirrors/bo/bootmetro