Bootstrap洼地
概述
洼地(Well)样式的效果和巨幕jumbotron样式类似，不同点是well样式有了边框设置，并且默认高度是自适应文本的高度。把 Well 用在元素上，就能有嵌入（inset）的简单效果
Well样式的使用方法非常简单，使用.well类即可
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .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); } </style> </head> <body> <div class="well">www.qiquanji.com</div> </body> </html> 尺寸
well样式提供了不同大小的样式，主要是padding和圆角大小，分别是well-lg和well-sm。使用时，直接和well一起应用在同一个元素上即可
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .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); } .well-lg { padding: 24px; border-radius: 6px; } .well-sm { padding: 9px; border-radius: 3px; } </style> </head> <body> <div class="well">例子02</div> <div class="well well-lg">例子02</div> <div class="well well-sm">例子02</div> </body> </html> 本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知