Bootstrap Well


Well is a container <div> that causes the content to appear recessed or illustrated. To create a Well, simply place the content inside a <div> with class .well. The following example demonstrates a default Well:

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 默认的 Well</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

 <div class="well">您好，我在 Well 中！</div>

</body>
</html>

Run Instance»

Click "Run Instance" Button to view online examples

Dimensions

You can use the optional class well-lg or well-sm to change Well's Size. These two classes are used in conjunction with the .well class. These two classes affect the padding, making the Well appear larger or smaller depending on the class used.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - Well 的尺寸大小</title>
   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

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

</body>
</html>

Run instance »

Click the "Run instance" button to view the online instance