面板脚注

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

<!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-width,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">
面板的标题
</div>
<div class="panel-body">
这是面板的主题
</div>
<div class="panel-footer">
这是面板的脚注
</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历练实例：语境色彩的面板

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

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

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

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

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

  4. Bootstrap历练实例：面板的标题

    面板标题 我们可以通过以下两种方式来添加面板标题: 使用 .panel-heading class 可以很简单地向面板添加标题容器.to easily add a heading container ...

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

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

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

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

  7. Bootstrap历练实例：响应式导航(带有表单)

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

  8. Bootstrap历练实例：响应式导航

    <!DOCTYPE html><html lang="zh-cn"><head><meta http-equiv="Conten ...

  9. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

随机推荐

  1. 修正linux系统时间

    date 安装ntpdate工具# yum -y install ntp ntpdate 设置系统时间与网络时间同步# ntpdate cn.pool.ntp.org 将系统时间写入硬件时间# hwc ...

  2. 关于Struts漏洞工具的使用

    最新struts-scan资源: https://www.cesafe.com/3486.html 一,将资源下载后,放入liunx系统中,并且需要具备python2的操作环境 二,打开终端使用如下命 ...

  3. 道阻且长 莫失本心（我的OI之旅

    道阻且长 莫失本心      今天午睡醒来,发现自己发烧了.尽管穿的很厚,尽管今天的阳光如此明媚.身体还是由内而外地散发着冷意. 期末考已经结束了,接下来又是艰难而难忘的奥赛训练.(要到春节才能放假了 ...

  4. Java-GC-标记压缩算法

    标记压缩算法 其分为两个阶段标记阶段,和压缩阶段.其中标记阶段和标记清除算法的标记阶段是一样的. 对压缩算法来说,他的工作就是移动所有的可达对象到堆内存的同一区域中,使它们紧凑的排列在一起,从而将所有 ...

  5. Hexo - 记录一次Pages服务部署失败的原因

    问题与分析 某天忽然发现,一直运行得好好的Pages服务部署失败了,GitHub Pages报错如下: Your site is having problems building: The tag c ...

  6. BZOJ3622（容斥+dp）

    思路 "恰k个"考虑求至少k.k+1--个容斥 题面说所有数字都不同,可以将所求转化为糖比药多的组数恰为\((n+k)/2\)的方案数 \(f[i][j]\)数组我觉得更好的理解方 ...

  7. D. Array Division

    http://codeforces.com/contest/808/problem/D 一开始是没什么想法的,然后回顾下自己想题的思路,慢慢就想出来了.首先要找到是否有这样的一个位置使得: 前缀和 = ...

  8. DialogHelper

    //require ScrollHelper.js function DialogHelper() { var _this = this; var doc = window.document; _th ...

  9. Win7环境下配置FTP

    1.打开 控制面板-->程序和功能-->打开或关闭Windows资源,在弹出的窗体里找到 “Internet信息服务”,展开后选择“Ftp服务器",然后点击"确定&qu ...

  10. ZR#330. 【18 提高 3】矿石(容斥)

    题意 题目链接 Sol 挺显然的,首先对每个矿排序 那么答案就是$2^x - 2^y$ $x$表示能覆盖到它的区间,$y$表示的是能覆盖到它且覆盖到上一个的区间 第一个可以差分维护 第二个直接vect ...