带列表组的面板

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

<!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">
<h2 class="panel-title">页面标题</h2>
</div>
<div class="panel-body">
<p>这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。</p>
</div>
<ul class="list-group">
<li class="list-group-item">Html5</li>
<li class="list-group-item">Css3</li>
<li class="list-group-item">Bootstrap</li>
<li class="list-group-item">Javascript</li>
<li class="list-group-item">jQuery</li>
<li class="list-group-item">AngularJS</li>
<li class="list-group-item">jQueryUI</li>
<li class="list-group-item">C#.Net</li>
<li class="list-group-item">MsSql</li>
</ul>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h2 class="panel-title">页面标题</h2>
</div>
<div class="panel-body">
<p>这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。</p>
</div>
<ul class="list-group">
<li class="list-group-item">Html5</li>
<li class="list-group-item">Css3</li>
<li class="list-group-item">Bootstrap</li>
<li class="list-group-item">Javascript</li>
<li class="list-group-item">jQuery</li>
<li class="list-group-item">AngularJS</li>
<li class="list-group-item">jQueryUI</li>
<li class="list-group-item">C#.Net</li>
<li class="list-group-item">MsSql</li>
</ul>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h2 class="panel-title">页面标题</h2>
</div>
<div class="panel-body">
<!--<p>这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。这是一个基本的面板内容。</p>-->
<ul class="list-group">
<li class="list-group-item">Html5</li>
<li class="list-group-item">Css3</li>
<li class="list-group-item">Bootstrap</li>
<li class="list-group-item">Javascript</li>
<li class="list-group-item">jQuery</li>
<li class="list-group-item">AngularJS</li>
<li class="list-group-item">jQueryUI</li>
<li class="list-group-item">C#.Net</li>
<li class="list-group-item">MsSql</li>
</ul>
</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历练实例：输入框组的大小

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

  3. Bootstrap历练实例：按钮组大小

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

  4. Bootstrap 警告、进度条、列表组、面板

    摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...

  5. Bootstrap历练实例：带徽章的列表组

    向列表组添加徽章 我们可以向任意的列表项添加徽章组件,它会自动定位到右边.只需要在 <li> 元素中添加 <span class="badge"> 即可.下 ...

  6. Bootstrap历练实例：向列表组添加内容

    向列表组添加自定义内容 我们可以向上面已添加链接的列表组添加任意的 HTML 内容.下面的实例演示了这点: <!DOCTYPE html><html><head>& ...

  7. Bootstrap历练实例：向列表组添加链接

    向列表组添加链接 通过使用锚标签代替列表项,我们可以向列表组添加链接.我们需要使用 <div> 代替 <ul> 元素.下面的实例演示了这点: <!DOCTYPE html ...

  8. Bootstrap历练实例：默认的列表组

    Bootstrap 列表组 本章我们将讲解列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-grou ...

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

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

随机推荐

  1. 剑指Offer的学习笔记（C#篇）-- 对称的二叉树

    题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的. 一 . 题目分析 递归法. 一.空树判断,单独搞出来. 二.非空树. 递归:一 ...

  2. DOM的学习网站 DOM是HTML和XML的编程接口

  3. appium desktop连接模拟器

    1.adb准备好,我建议,下载Androidstudio,因为这样adb是最新的,可能会避免很多问题 2.adb connect 127.0.0.1:xxxx (网易mumu是7555,别的模拟器自行 ...

  4. VxWorks实验六 基于优先级的抢占式调度及实验的源程序和实验步骤

    基于优先级的抢占式调度及实验的源程序和实验步骤 1 实验目的    1．学习并验证基于优先级的抢占式调度2 实验内容    在实验一建立的 project 中,创建3 个任务,对这三个任务使用基于优先 ...

  5. 15.更新和删除数据--SQL

    一.更新数据 更新(修改)表中的数据,可以使用UPDA TE语句.有两种使用UPDA TE的方式: 更新表中的特定行: 更新表中的所有行. 警告:不要省略WHERE子句 在使用UPDA TE时一定要细 ...

  6. Linux —— ps命令

    Ps命令 作用 显示瞬间进程的状态,并不动态连续: 如果想对进程进行实时监控应该用top命令: 对进程的管理,可以使用kill命令发送信号 Ps PID : 运行着的命令的进程编号 TTY : 命令所 ...

  7. NET Core 2.0 使用支付宝

    ASP.NET Core 2.0 使用支付宝PC网站支付   前言 最近在使用ASP.NET Core来进行开发,刚好有个接入支付宝支付的需求,百度了一下没找到相关的资料,看了官方的SDK以及Demo ...

  8. ASP.NET Core性能测试

    ASP.NET Core性能测试 应用性能直接影响到托管服务的成本,因此公司在开发应用时需要格外注意应用所使用的Web框架,初创公司尤其如此.此外,糟糕的应用性能也会影响到用户体验,甚至会因此受到相关 ...

  9. STM32之ADC(内部基准电压，参考电压）

    转 STM32内部参照电压VREFIN的使用 https://blog.csdn.net/uncle_guo/article/details/50625660 每个STM32芯片都有一个内部的参照电压 ...

  10. Jenkins+Gitlab+Ansible自动化部署(五)

    Freestyle Job实现静态网站部署交付(接Jenkins+Gitlab+Ansible自动化部署(四)https://www.cnblogs.com/zd520pyx1314/p/102445 ...