面板标题

我们可以通过以下两种方式来添加面板标题：

  • 使用 .panel-heading class 可以很简单地向面板添加标题容器。to easily add a heading container to your panel.
  • 使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

下面的实例演示了这两种方式：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap历练实例：面板的标题</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-wdith,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
</head>
<body>
<div style="padding:20px">
<div class="panel panel-default">
<div class="panel-heading">
不带title的panel
</div>
<div class="panel-body">
这是面板的主体
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title">带title的panel</h2>
</div>
<div class="panel-body">
这是面板的主体
</div>
</div>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：面板的标题的更多相关文章

  1. Bootstrap历练实例：带列表组的面板

    带列表组的面板 我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组.您可以从 列表组 一章中 ...

  2. Bootstrap历练实例：语境色彩的面板

    带语境色彩的面板 使用语境状态类 panel-primary.panel-success.panel-info.panel-warning.panel-danger,来设置带语境色彩的面板,实例如下: ...

  3. Bootstrap历练实例：带表格的面板

    带表格的面板 为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table.假设有个 <div> 包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分 ...

  4. bootstrap历练实例：面板脚注

    面板脚注 我们可以在面板中添加脚注,只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可.下面的实例演示了这点: <!DOCTYPE htm ...

  5. Bootstrap历练实例：默认的面板(Panels)

    Bootstrap 面板(Panels) 本章将讲解 Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素 ...

  6. Bootstrap历练实例：模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

  7. Bootstrap历练实例：嵌套的媒体对象

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. Bootstrap历练实例：默认的媒体对象

    Bootstrap 多媒体对象(Media Object) 本章我们将讲解 Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论), ...

  9. Bootstrap历练实例：轮播(carousel)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. Hadoop 2.7.3 HA 搭建及遇到的一些问题

    看了Hadoop的一个7天视频教程,里面给出了搭建的详细步骤,教程中是按2.4.1版本搭建的,我用的是2.7.3版本,好像没什么差别.下面是抄过来的,加了一点注释. hadoop2.0已经发布了稳定版 ...

  2. HTML <!doctype>声明

    昨天看代码的时候,发现在<!doctype>中添加了新的属性,以前写代码的时候并不会在该声明里添加新的属性.昨天看到了,就把它记下来学习一下,顺便整理成文档.以便日后复习. <!DO ...

  3. Vue多环境配置

    Vue多环境配置 大家都知道,使用vue-cli脚手架生成的Vue项目只有开发环境和生产环境,然而在实际开发中,用到的不止这些环境,还包括测试环境,准生产环境等等.所以需要自己添加没有的环境. 以测试 ...

  4. SpringBoot2.0 基础案例(08)：集成Redis数据库，实现缓存管理

    一.Redis简介 Spring Boot中除了对常用的关系型数据库提供了优秀的自动化支持之外,对于很多NoSQL数据库一样提供了自动化配置的支持,包括:Redis, MongoDB, Elastic ...

  5. Centos下磁盘管理的常用命令记录（如查找大文件）

    Centos下磁盘管理的常用命令记录 查看系统磁盘空间占用,使用命令: df -h 结果: 查看磁盘inode使用情况,如果inode用完了,磁盘就没法写入新的内容了: df -i 结果: 如何查找磁 ...

  6. IDEA | 创建启动SpringBoot项目命令

    clean package spring-boot:run -Dmaven.test.skip=true

  7. #1369 : 网络流一·Ford-Fulkerson算法 模板题

    http://hihocoder.com/problemset/problem/1369?sid=1108721 别人都说先学网络流再学二分图,但是我先学了二分图的,感觉网络流好高端啊. 首先对于原图 ...

  8. 在ubuntu 12.04上安装tomcat 7.40

    因为源上的版本问题,所以没有使用源上的自动安装包,老规矩,Tomcat 7.0.40 Core下载地址:http://mirror.bit.edu.cn/apache/tomcat/tomcat-7/ ...

  9. 浅析libuv源码-node事件轮询解析(3)

    好像博客有观众,那每一篇都画个图吧! 本节简图如下. 上一篇其实啥也没讲,不过node本身就是这么复杂,走流程就要走全套.就像曾经看webpack源码,读了300行代码最后就为了取package.js ...

  10. T-SQL查询处理执行顺序（一）

    对于T-SQL编程,用得最广泛的,莫过于查询(Querying).要想写出高质量.高性能的查询语句,必须深入地了解逻辑查询处理. 一.逻辑查询处理的各个阶段 (5)SELECT DISTINCT TO ...