首页 > 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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板