Bootstrap 超大屏幕

超大屏幕（Jumbotron）是页面顶部的大号展示区：放大的标题、醒目的说明文字和行动按钮，常用于落地页、活动页或专题页的开场。它本质是一个带浅灰背景的容器，具体内容完全由你自己摆放，是快速做出"第一眼冲击力"的组件。

容器内的超大屏幕

把 .jumbotron 放在 .container 内部，它会显示为带圆角的灰色区块：

<div class="jumbotron">
  <h1>欢迎学习 Bootstrap</h1>
  <p>一个用于快速开发响应式网站的前端框架。</p>
  <p><a class="btn btn-primary btn-lg" href="#">开始学习</a></p>
</div>

效果：页面中出现一块浅灰色圆角大面板，标题字号被明显放大，按钮也更大更醒目，视觉焦点集中在中央。

全宽超大屏幕

把 .jumbotron 直接放在 .container 外面，它就会占满整行宽度，圆角也随之消失：

<div class="jumbotron">
  <h1>通栏大标题</h1>
  <p>这段内容横贯整个屏幕宽度。</p>
</div>
<div class="container">
  <p>这里是下方宽度受限的普通正文。</p>
</div>

效果：顶部的灰色横幅左右撑满浏览器视口，下方的正文仍居中限定宽度，通栏横幅显得更有气势。

提示：超大屏幕内部自带较大的上下内边距与圆角过渡，放入内容时无需再手动添加 padding，直接写标题、文字与按钮即可得到合适的留白。

内部排版建议

超大屏幕内的层级与普通页面保持一致即可：用 <h1> 做主标题、<p> 写简介、用大号按钮做引导；若想让次要说明显示为小号灰字，可以再嵌套 <small>，不必发明新的结构。

小结：.jumbotron 提供大号开场横幅，放在容器内是圆角块、放在容器外是全宽条；它擅长营造视觉焦点，适合产品介绍与活动页的头部区域。