Bootstrap窪地

本文轉載於:猿2048網站➨Bootstrap窪地

前面的話

　　這是一個輕量、靈活的組件，它能延伸至整個瀏覽器視口來展現網站上的關鍵內容。本文將詳細介紹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。使用時，直接和well一塊兒應用在同一個元素上便可

.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>