Bootstrap Well
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 类,调整其大小以达到满意的效果。