文章出處

前面的話

　　這是一個輕量、靈活的組件，它能延伸至整個瀏覽器視口來展示網站上的關鍵內容。本文將詳細介紹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>

 


文章列表


不含病毒。www.avast.com
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄