What are Bootstrap swales?-HTML Tutorial-php.cn

What are Bootstrap swales?

零下一度

Release： 2017-07-19 17:17:07

Original

1335 people have browsed it

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>

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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