Bootstrap 3 之 Bootstrap Well

Well 是 Bootstrap 中一个常用的组件,用于在页面上创建一个具有圆角和背景颜色的容器。Well 可以用来突出显示内容,使其在页面中更加突出。

使用 Well

要在页面中使用 Well,只需在需要添加 Well 的元素上添加 well 类即可。例如:

---- -------------
    ---- ---- --
------

上面的代码将在页面上创建一个默认样式的 Well 区域,具有灰色背景和圆角边框。

自定义 Well 样式

除了默认样式外,Bootstrap 还提供了几种不同样式的 Well,可以根据需要选择不同的样式。例如,可以使用 well-lg 类来创建一个大型的 Well 区域:

---- ----------- ---------
    ------ ---- --
------

还可以使用 well-sm 类来创建一个小型的 Well 区域:

---- ----------- ---------
    ------ ---- --
------

自定义 Well 颜色

除了默认的灰色背景外,Bootstrap 还允许自定义 Well 的背景颜色。可以使用以下类来设置不同的背景颜色:

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

例如,要创建一个带有蓝色背景的 Well 区域,可以使用 well-primary 类:

---- ----------- --------------
    ----------- ---- --
------

总结

Well 是 Bootstrap 中一个常用的组件,可以用来创建具有圆角和背景颜色的容器。通过使用不同的类,可以定制 Well 的样式和背景颜色,使其更加适应页面的需求。


上一篇:Bootstrap 面板
下一篇:Bootstrap HTML编码规范