BootstrapBootstrap洼地

前方的口舌

  这是一个轻量、灵活的组件,它会延长到所有浏览器视口来展示网站上的重中之重内容。本文将详细介绍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);
}

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

 

尺寸

  well样式提供了不同大小的体裁,主要是padding和圆角大小,分别是well-lg和well-sm。使用时,直接与wellBootstrap一起以在跟一个素上即可

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

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

 

相关文章