带列表组的面板

我们可以在任何面板中包含列表组，通过在 <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兄弟连 JavaWeb教程 过滤器3

    过滤器案例:字符编码过滤器 在JavaWeb程序开发中,由于Web容器内部所使用编码格式并不支持中文字符集,所以,处理浏览器请求中的中文数据就会出现乱码现象. 图3  无字符编码过滤器 从上图可以看出 ...

  2. Python爬虫之设置selenium webdriver等待

    Python爬虫之设置selenium webdriver等待 ajax技术出现使异步加载方式呈现数据的网站越来越多,当浏览器在加载页面时,页面上的元素可能并不是同时被加载完成,这给定位元素的定位增加 ...

  3. Centos7.x 安装 pptp

    VPN 1:检查是否支持PPTP #返回OK && echo ok ok 2:安装ppp yum install -y ppp 3:导入EPEL源 rpm -ivh http://dl ...

  4. LVM逻辑卷基本概念以及相关操作

    一.LVM概念 LVM(Logical Vloume Manager):它是linux环境下对磁盘进行管理的一种机制,正常挂载的磁盘在磁盘资源快要耗尽时,无法动态拉伸增加资源,或由于特殊情况需要动态缩 ...

  5. mysql 启动停止脚本 and mysql 迁移 导入和导出

    ####监控脚本 [root@pdb~]# more /opt/VRTS/scripts/mysql_monitor.sh#!/bin/shn=`ps -ef |grep mysql|grep &qu ...

  6. 转 v$session_longops视图

    转http://www.dbdream.com.cn/2013/10/14/vsession_longops%E8%A7%86%E5%9B%BE/ 1.有的时候不准确 ,我看到 session wai ...

  7. 关于AQS——独占锁特性+共享锁实现（二）

    五.可中断获取锁的实现(独占锁的特性之一) 我们知道lock相较于synchronized有一些更方便的特性,比如能响应中断以及超时等待等特性,现在我们依旧采用通过学习源码的方式来看看能够响应中断是怎 ...

  8. 【Java】JMM内存模型和JVM内存结构

    JMM内存模型和JVM内存结构 JAVA内存模型(Java Memory Model) Java内存模型,一般指的是JDK 5 开始使用的新的内存模型,主要由JSR-133: JavaTM Memor ...

  9. Java基础（Java概述、环境变量、注释、关键字、标识符、常量）

    第1天 Java基础语法 今日内容介绍 u Java开发环境搭建 u HelloWorld案例 u 注释.关键字.标识符 u 数据(数据类型.常量) 第1章 Java开发环境搭建 1.1 Java概述 ...

  10. apache官方供下载所有项目所有版本的官方网站地址

    Apache官网有一个列举apache所有发布的项目的各个版本的官方网站,现在在此记录下来供大家快速浏览使用. 网站地址如下: http://archive.apache.org/dist/