Bootstrap Well
May 04, 2021 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:
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:
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.