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

#

<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>
小火柴的蓝色理想
小火柴的蓝色理想

 

以上是Bootstrap窪地是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn