Bootstrap3实用教程
3.21 Well
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

按钮下拉菜单

输入框组

导航

导航条

面包屑导航

分页导航

标签

徽章

巨幕

页头

缩略图

警告框

进度条

媒体对象

列表组

面板

响应式内嵌元素

Well

Well 就是一个类为 .well 的容器,其中的内容看起来像是陷入页面一样,常常用来显示博客的元信息,比如作者、日期和类别。如:

<div class="well">
  Look, I'm in a well!
</div>

效果如图 3‑102所示:

Well组件
图3-102 Well组件

还有两个类 .well-lg 和 .well-sm,可以与 .well 同时使用,它们会影响内边距,前者会增大内边距,后者会减小内边距。如:

<div class="well well-lg">
  Look, I'm in a large well!
</div>
<div class="well well-sm">
  Look, I'm in a small well!
</div>

效果如图 3‑103所示:

Well组件的尺寸
图3-103 Well组件的尺寸

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验