带列表组的面板

我们可以在任何面板中包含列表组，通过在 <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. IT兄弟连 Java语法教程 Java平台的版本划分

    自从Sun公司推出Java以来,就力图使之无所不能.Java发展至今,按应用范围划分为3个版本,即Java SE.Java EE和Java ME,也就是SunOne(Open Net Environm ...

  2. Mac下通过homebrew安装maven

    1.安装Homebrew 将以下命令粘贴至终端 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebr ...

  3. 一个模块对应一个Servlet对应一张表 BaseServlet抽取反射进行方法转发实现

  4. 福昕阅读器把pdf某一页保存出来

    第一步: 第二步: 第三步: 第四步:点击保存即可

  5. 维护gcd的线段树 补发一波。。。

    基础线段树(辣鸡的不行) 发现自己线段树除了会维护加法和乘法就啥也不会了QWQ太菜了 瞎写了一个维护gcd的 首先,gcd(x,y)= gcd(x,y-x) 并且很容易推广到n个数,所以我们可以把原数 ...

  6. 硬盘MBR和GPT区别

    似乎人人都可以张嘴就说"我懂电脑",但是总有一些看起来完全不懂但实际上非常基础的东西让"懂"与"不懂"清晰地划清界限.比如UEFI+GPT就 ...

  7. zabbix agent 配置

    http://blog.csdn.net/z644041867/article/details/76618644 https://www.cnblogs.com/miclesvic/p/6144924 ...

  8. mysql in和exists性能比较和使用

    in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询.一直以来认为exists比in效率高的说法是不准确的. 如果查询的两个表大小相当,那么用i ...

  9. 基于JAVA的设计模式之单例模式

    概念 于大二上学期面向对象C++期中考试中有这么道题:一个Computer有多个USB插口,那么意味着这台电脑可以插多个鼠标,但是无论你如何拔插多少个鼠标,桌面上的鼠标一直只显示一个,且多个硬件鼠标都 ...

  10. check设置默认值但刷新后就会清空

    关于check设置默认值但刷新后就会清空的问题 可能是由于浏览器的问题 我这边就直接在ComponentDidMount里面加jq使得该radio的状态为选中,后边还发现一个问题就是在点击的时候多次点 ...