Bootstrap3实用教程
3.19.1 创建面板
阅读(

Bootstrap基础

Bootstrap全局样式

Bootstrap组件

Glyphicons字体图标

下拉菜单

按钮组

按钮下拉菜单

输入框组

导航

导航条

面包屑导航

分页导航

标签

徽章

巨幕

页头

缩略图

警告框

进度条

媒体对象

列表组

面板

虽然不总是必须的,但某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况,可以试试面板组件。

创建面板

Bootstrap的面板组件是内容的容器,它由页眉、主体、页脚三部分组成。面板组件由.panel容器定义,页眉、主体、页脚分别由.panel-title.panel-body.panel-footer的容器定义。

1、基本面板

由于面板组件的页眉和页脚是可选的,因此基本的面板只包含主体,它只是一个带有边框的文本框。如:

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

效果如图 3‑94所示:

基本面板
图3-94 基本面板

2、带标题的面板

通过.panel-heading,可以很简单地为面板加入一个标题容器。如:

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

效果如图 3‑95所示:

带标题的面板
图3-95 带标题的面板

你也可以将标题的内容放在<h1>-<h6>标签中,不过这是可选的。使用<h1>-<h6>标签时,如果要为它们提供预定义的样式,就要为它们设置.panel-title类。不过,<h1>-<h6>标签的字体大小将被.panel-title的样式所覆盖。如:

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

效果如图 3‑96所示:

带标题的面板
图3-96 带标题的面板

注意:如果标题中包含链接,为了给链接设置合适的颜色,务必将链接放到带有.panel-title类的标题标签中。

3、带页脚的面板

通过.panel-footer,来为面板加入一个页脚容器。页脚一般用来放置按钮或次要文本。不过,页脚不会从情境中继承颜色,因为它们并不是主要内容。如:

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

效果如图 3‑97所示:

带页脚的面板
图3-97 带页脚的面板

关于作者

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

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验