博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap洼地
阅读量:6007 次
发布时间:2019-06-20

本文共 742 字,大约阅读时间需要 2 分钟。

前面的话

  这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容。本文将详细介绍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);}
小火柴的蓝色理想

 

尺寸

  well样式提供了不同大小的样式,主要是padding和圆角大小,分别是well-lg和well-sm。使用时,直接和well一起应用在同一个元素上即可

.well-lg {
padding: 24px; border-radius: 6px;}.well-sm {
padding: 9px; border-radius: 3px;}
小火柴的蓝色理想
小火柴的蓝色理想
小火柴的蓝色理想

 

转载地址:http://vosmx.baihongyu.com/

你可能感兴趣的文章
1.部分(苹果)移动端的cookie不支持中文字符,2.从json字符串变为json对象时,只支持对象数组...
查看>>
HDU3257 Hello World!【打印图案+位运算】
查看>>
Node.js 抓取电影天堂新上电影节目单及ftp链接
查看>>
从设计者的角度看 React
查看>>
CSS居中总结大全
查看>>
Elasticsearch 参考指南(安装X-Pack)
查看>>
[LintCode] 604. Design Compressed String Iterator
查看>>
微信小程序黑客马拉松即将开始,来做最酷的 Mini Program Creators!
查看>>
JavaScript基础---函数
查看>>
前端每日实战:120# 视频演示如何用纯 CSS 创作锡纸撕开的文字效果
查看>>
Laravel实用小功能
查看>>
matplotlib绑定到PyQt5(有菜单)
查看>>
利用Powershell和ceye.io实现Windows账户密码回传
查看>>
Windows 8.1 今年 1 月市场份额超 Vista
查看>>
《设计团队协作权威指南》—第1章1.5节总结
查看>>
Chair:支付宝前端团队推出的Node.js Web框架
查看>>
《Total Commander:万能文件管理器》——第3.8节.后续更新
查看>>
BSD vi/vim 命令大全(下)[转]
查看>>
css3中变形与动画(一)
查看>>
[XMove-自主设计的体感解决方案] 系统综述
查看>>