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);
}

8959d1adff1d7f51c3fc375ca8f02fc5小火柴的蓝色理想16b28748ea4df4d9c2150843fecfba68

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;
}

8959d1adff1d7f51c3fc375ca8f02fc5小火柴的蓝色理想16b28748ea4df4d9c2150843fecfba6805411e6872591ef99e276db56077d8a6小火柴的蓝色理想16b28748ea4df4d9c2150843fecfba68ea5496650c8431bb8e65aec523da32fe小火柴的蓝色理想16b28748ea4df4d9c2150843fecfba68

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