Bootstrap 页面标题

页面标题（Page Header）负责给 <h1> 之类的标题留出合适的上方间距，并在标题底部画一条分隔线，让每个页面的标题区域风格统一。它只负责"留白与装饰"，并不改变标题本身的字号与粗细。

基本用法

把标题放进 .page-header 容器即可：

<div class="page-header">
  <h1>示例页面标题</h1>
</div>

效果：标题上方多出约 40 像素的留白，标题下方出现一条浅灰色横线，把标题区与正文区清晰分开。

配合副标题

利用 <small> 可以给主标题配上一行浅灰色的副标题，形成"主副分明"的效果：

<div class="page-header">
  <h1>产品文档 <small>使用说明与常见问题</small></h1>
</div>

效果：主标题与副标题同处一行，但副标题字号更小、颜色更浅，下面同样带有一条分隔线。

与正文的分隔示例

标题区之后紧跟正文时，这条分隔线能让内容过渡更自然：

<div class="page-header">
  <h1>新闻中心</h1>
</div>
<p>这里是第一条新闻的摘要……</p>
<p>这里是第二条新闻的摘要……</p>

效果：先看到带下边线的标题，再看到正文段落，版面节奏清楚，标题与正文不会挤成一团。

使用要点

• 页面结构建议为 .container > .page-header > h1，避免把 .page-header 直接放进栅格行内产生多余间距。
• 一个页面通常只放一个 .page-header，小节的次级标题继续用普通 <h2>、<h3>，避免出现多条粗线。

小结：.page-header 用最小成本统一标题区的"留白 + 分隔线"，让多页面项目观感整齐；它是纯样式组件，引入后无需任何脚本即可生效。