Bootstrap Wells

Well（井）是向内凹陷的灰色圆角容器，让其中的内容"沉"下去，与页面主体形成视觉层次，适合放提示文字、辅助说明等轻量区块。它和面板一样是 3.x 的纯 CSS 容器，新版本中已被卡片取代。

基础用法

只需给元素加上 well 类即可得到凹陷外观：

<div class="well">
    这是一段放在井里的辅助说明文字。
</div>

显示效果：文字带浅灰背景、内边距与圆角，像嵌在页面里的凹槽。

尺寸变化

well-lg 增大内边距、视觉更宽大；well-sm 减小内边距、更加紧凑：

<div class="well well-lg">大号井：留白多，适合重点强调</div>
<div class="well well-sm">小号井：紧凑，适合侧边栏</div>

显示效果：两个灰底凹槽上下排列，前者明显宽松，后者紧贴文字。

组合使用示例

Well 常与排版、按钮搭配，比如侧边栏的"使用提示"卡片：

<div class="well">
    <h4>使用提示</h4>
    <p>建议每日备份数据库，并定期清理日志文件。</p>
    <button class="btn btn-primary">立即备份</button>
</div>

显示效果：标题、说明与按钮统一收进凹槽中，与页面正文自然区分。

多个 Well 的间距

相邻 Well 之间默认没有间距，可借助行内样式或用包装层留出空隙：

<div class="well">第一个井</div>
<div class="well" style="margin-top:15px">第二个井</div>

显示效果：两个凹槽上下并排，第二个与第一个之间留出 15 像素空隙。

Well 与面板如何选择

面板带标题栏、脚注与五种语境色，适合"结构化"内容；Well 只有一个凹槽外观，适合轻量提示。需要强调标题时选面板，只需一块低调底色时选 Well 即可。

小结：Well 是一行 class 即可完成的凹陷容器，适合轻量提示区块；与面板相比它没有标题与语义色，但胜在简单，两者都不需要任何 JavaScript。