Bootstrap Well

Well 是一种会引起内容洼陷显现或插图作用的容器 <div>。为了创立 Well,只需要简略地把内容放在带有 class .well 的 <div> 中即可。下面的实例演示了一个默许的 Well:

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默许的 Well</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

 <div class="well">您好,我在 Well 中!</div>

</body>
</html>

成果如下所示:

默许的 Well

尺度巨细

您可以运用可选类 well-lgwell-sm 来改动 Well 的尺度巨细。这两个类是与 .well 类结合运用的。这两个类会影响内边距(padding),依据运用的类,Well 会显现得更大或许更小。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - Well 的尺度巨细</title>
   <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="well well-lg">您好,我在大的 Well 中!</div>
<div class="well well-sm">您好,我在小的 Well 中!</div>

</body>
</html>

成果如下所示:

Well 的尺度巨细