Bootstrap Well


May 04, 2021 08:00 Bootstrap


Table of contents


Bootstrap Well

Well is a container that causes content depression displays or illustration effects. I n order to create Well, you simply put the content in the slt;div> with class .well. The following example demonstrates a default Well:

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - 默认的 Well</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow" ></script></head><body>

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

The result is as follows:

Bootstrap Well

Size

You can use the optional class well-lg or well-sm to change the size of Well. T hese two classes are used in conjunction with the .well class. These two classes affect padding, and Well displays larger or smaller depending on the class used.

<!DOCTYPE html><html><head>
   <title>Bootstrap 实例 - Well 的尺寸大小</title>
   <link href="//cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="//cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow" ></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow" ></script></head><body><div class="well well-lg">您好,我在大的 Well 中!</div><div class="well well-sm">您好,我在小的 Well 中!</div></body></html>

The result is as follows:

Bootstrap Well

Well container practice

Add a Bootstrap well container

Bootstrap's Well container gives you a sense of visual depth in the columns you create.

Add a button to the Bootstrap well container

With this exercise, you can add button tags to the div you created.