首頁 > web前端 > html教學 > Bootstrap窪地是什麼?

Bootstrap窪地是什麼?

零下一度
發布: 2017-07-19 17:17:07
原創
1370 人瀏覽過

窪地(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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板