Bootstrap3 面板 .panel 容器

面板

虽然不总是必须的，但某些时候你可能需要将某些 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 上开源。

Bootstrap3 面板 .panel 容器相关推荐

面板panel与窗口frame的区别
面板panel与窗口frame的区别 References 都可以在其上加载组件面板需要加载在组件上才能使用,而窗口不需要 JPanel和JFrame都可以作为容器存放别的控件但JPanel一般作 ...
c# 火狐浏览器怎么嵌入窗体中_C#WinForm窗体内Panel容器中嵌入子窗体、程序主窗体设计例子...
C#WinForm父级窗体内Panel容器中嵌入子窗体.程序主窗体设计例子在项目开发中经常遇到父级窗体嵌入子窗体所以写了一个例子程序,顺便大概划分了下界面模块和配色,不足之处还望指点主窗体窗体采用 ...
java gui容器_[Java教程]GUI Panel 容器以及布局管理器
[Java教程]GUI Panel 容器以及布局管理器 0 2016-11-09 07:04:32 一.Panel是AWT中的另一个典型的容器,它代表不能独立存在.必须放在其他容器中使用. 1.可作为 ...
AWT_面板 Panel（Java）
AWT_面板 Panel(Java) package Demo01;import java.awt.*; import java.awt.event.WindowEvent; import java. ...
jQuery Mobile中面板panel的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中面板panel的data-*选项带有 data-role="panel&q ...
Pandas 面板Panel
一.Panel介绍 Pandas 面板(Panel)是3维数据的存储结构,相当于一个存储 DataFrame 的字典,有3个轴(axis),分别给出描述涉及面板数据的操作的一些语义,具体如下: ite ...
Bootstrap3 面板的情景类
情景类 Bootstrap为面板提供了一组情景类 .panel-primary..panel-success..panel-info..panel-warning..panel-danger,通过给面 ...
Bootstrap中的面板(panel)
背景写自动折叠的面板时遇到点问题,虽与面板本身无关,可看到他有序的组织,我想bootstrap肯定有完整的面板结构.果不其然. 基本结构 <div class="panel-grou ...
深入理解BootStrap -- 面板(panel)17
1.面板面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能.同样在不同的版本中具有不同的源码: ☑ Less版本:对应的源码文件是 pane ...

Bootstrap3 面板 .panel 容器

面板

创建面板

Bootstrap3 面板 .panel 容器相关推荐

最新文章

热门文章