Bootstrap洼地是什么？

洼地（Well）：样式的效果和大屏幕展播Jumbotron样式类似，不同点是well样式有了边框设置，并且默认高度是自适应文本的高度。

示例代码：

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

　　这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。本文将详细介绍Bootstrap洼地

概述

　　洼地(Well)样式的效果和巨幕jumbotron样式类似，不同点是well样式有了边框设置，并且默认高度是自适应文本的高度。把 Well 用在元素上，就能有嵌入（inset）的简单效果

　　Well样式的使用方法非常简单，使用.well类即可

.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

尺寸

　　well样式提供了不同大小的样式，主要是padding和圆角大小，分别是well-lg和well-sm。使用时，直接和well一起应用在同一个元素上即可

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

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

 

Atas ialah kandungan terperinci Bootstrap洼地是什么？. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!