Bootstrap Well

介绍

Bootstrap Well是Bootstrap框架中的一个组件，是一种常用的用于添加背景颜色的方式，在添加背景颜色的同时还可以修整内边距，让页面看起来更美观。它可以用于任何元素，但其默认为div元素。

使用方法

Bootstrap Well使用相当简单，只需在需要设置颜色的元素上添加.well类即可，默认情况下.well为灰色。可以使用以下类改变.well背景颜色:

• .well-primary
• .well-success
• .well-info
• .well-warning
• .well-danger

<div class="well well-primary">
  <p>This is a primary well.</p>
</div>

Well组件还可以使用嵌套方式，通过嵌套Well组件实现多个不同颜色区块的嵌套，可以通过加上.well、.well-lg、.well-sm等类调整其大小。

<div class="well well-lg">
  <div class="well well-success">
    <p>This is a nested success well.</p>
  </div>
  <div class="well well-danger">
    <p>This is a nested danger well.</p>
  </div>
</div>

参数

Well组件可以使用以下参数：

• .well-lg：增加字体，增大边框间距和内边距。
• .well-sm：减小字体、边框间距和内边距。
• .well-rounded：圆角显示Well组件的元素。

<div class="well well-lg well-rounded">
  <p>This is a large well with rounded corners.</p>
</div>

总结

Bootstrap Well是一个非常实用的组件，可以方便地给页面添加颜色和内边距，让页面看起来更加美观。通过设置不同的背景颜色可以使不同区块更好地区分，以达到页面美观和易读的效果。同时也可以使用 well-lg 和 well-sm 类，调整其大小以达到满意的效果。