What are Bootstrap swales?

Well: The effect of the style is similar to the large-screen display Jumbotron style. The difference is that the well style has a border setting, and the default height is the height of the adaptive text.

Sample code:

<div class="well">   <p> sorry I have no word to say</p>   <blockquote>this is a 引用内容</blockquote></div>

This is a lightweight, flexible component that can extend to the entire browser viewport to display key content on the website. This article will introduce the Bootstrap depression in detail

Overview

The effect of the Well style is similar to the jumbotron style. The difference is that the well style has a border. setting, and the default height is the height of the adaptive text. By using Well on an element, you can have a simple effect of inset

The method of using the Well style is very simple, just use the .well class

.well {min-height: 20px;padding: 19px;margin-bottom: 20px;background-color: #f5f5f5;border: 1px solid #e3e3e3;border-radius: 4px;-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}

<div class="well">小火柴的蓝色理想</div>

SIZE

The well style provides styles of different sizes, mainly padding and rounded corner sizes, which are well-lg and well-sm respectively. When used, just apply it directly to the same element together with well

.well-lg {padding: 24px;border-radius: 6px;
}.well-sm {padding: 9px;border-radius: 3px;
}

&lt;div class=&quot;well&quot;&gt;小火柴的蓝色理想&lt;/div&gt;<div class="well well-lg">小火柴的蓝色理想</div><div class="well well-sm">小火柴的蓝色理想</div>

The above is the detailed content of What are Bootstrap swales?. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn