简单的标题栏仅仅包含一个标题:
<div class="heading">
<div class="title">这是一个简单的标题栏</div>
</div>
使用链接作为标题
<div class="heading">
<a class="title" href="your/site">我是标题</a>
</div>
在标题栏中包含导航:
<div class="heading">
<nav class="nav">
<a>首页</a>
<a>项目</a>
<a>需求</a>
<a>任务</a>
</nav>
</div>
在标题栏中包含标题和导航,此时导航会自动在右侧显示:
<div class="heading">
<div class="title"><strong>我是标题</strong></div>
<nav class="nav">
<a><i class="icon-search"></i></a>
<a><i class="icon-bars"></i></a>
</nav>
</div>
在标题栏中包含头像:
<div class="heading">
<div class="avatar"><i class="icon-home"></i></div>
<div class="title"><strong>ZUI</strong></div>
<nav class="nav">
<a><i class="icon-search"></i></a>
<a><i class="icon-bars"></i></a>
</nav>
</div>
标题居中:
<div class="heading">
<nav class="nav">
<a><i class="icon-bars"></i></a>
</nav>
<div class="title text-center"><strong>MZUI</strong></div>
<nav class="nav">
<a><i class="icon-search"></i></a>
</nav>
</div>
标题栏作为应用全局标题栏通常需要固定在页面顶部或底部。在 <body>
或 .page
上使用辅助类 .with-heading-top
或 .with-heading-bottom
,并在 .heading
上使用辅助类 .affix.dock-top
或 .affix.dock-bottom
。
// 固定在顶部
<body class="with-heading-top">
<header class="heading affix dock-top">
...
</header>
</body>
// 固定在底部
<body class="with-heading-bottom">
<footer class="heading affix dock-bottom">
...
</footer>
</body>
在同一个页面可以同时将两个应用标题栏分别固定顶部和底部。
// 固定在顶部和底部
<body class="with-heading-top with-heading-bottom">
<header class="heading affix dock-top">
...
</header>
...
<footer class="heading affix dock-bottom">
...
</footer>
</body>
当应用标题栏固定时,可以为 .heading.affix
使用 .dock-auto
来让固定的应用标题栏响应页面滚动事件并在合适的时候自动隐藏和显示。
// 固定在顶部和底部并自动显示或隐藏
<body class="with-heading-top with-heading-bottom">
<header class="heading affix dock-top dock-auto">
...
</header>
...
<footer class="heading affix dock-bottom dock-auto">
...
</footer>
</body>
外观选项用法参考 基础 > 外观 章节。以下列举的常见用法。
.heading.divider
.heading.gray
.heading.dark
.heading.primary
.heading.primary-pale
.heading.primary.outline
.heading.success.rounded