Bootstrap面板（Panels）的简单实现代码

更新时间：2017年03月17日 09:10:24 作者：boonyaxnn

这篇文章主要为大家详细介绍了Bootstrap面板（Panels）的简单实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Bootstrap面板展示的具体代码，供大家参考，具体内容如下

一、基本的面板

html代码

<!DOCTYPE html> 
<html> 
<head> 
 <title>Bootstrap list-group</title> 
 <meta charset="utf-8"> 
 <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > 
 <style> 
 body{ 
  margin-top:30px; 
  font-family: '楷体'; 
 } 
 p{ 
  font-size: 18px; 
 } 
 </style> 
</head> 
  
<body> 
 
<div class="container"> 
     <!--基本的面板--> 
 <div class="panel panel-danger"> 
  <a href="#" rel="external nofollow" rel="external nofollow" class="list-group-item active" > 
   <h3 class="list-group-item-heading">这是一个基本的面板</h3> 
   <p>只需要向 div元素添加 class .panel 和 class .panel-default </p> 
  </a> 
 </div> 
     <!--标题面板--> 
 <div class="panel panel-default"> 
  <div class="panel-heading">不带 title 的面板标题 </div> 
  <div class="panel-body"> 面板内容 </div> 
 </div> 
 <div class="panel panel-default"> 
  <div class="panel-heading"> 
   <h3 class="panel-title">带 title 的面板标题 </h3> 
  </div> 
  <div class="panel-body"> 面板内容 </div> 
 </div> 
     <!--面板脚注--> 
 <div class="panel panel-danger"> 
  <a href="#" rel="external nofollow" rel="external nofollow" class="list-group-item" > 
   <h3 class="list-group-item-heading">这是一个基本的面板</h3> 
   <div class="panel panel-footer">.panel panel-footer面板脚注</div> 
  </a> 
 </div> 
     <!--带语境色彩的面板--> 
 <div class="panel panel-primary"> 
  <div class="panel-heading"><h3 class="panel-title">面板标题</h3></div> 
  <div class="panel-body">这是一个基本的面板 </div> 
 </div> 
 <div class="panel panel-info"> 
  <div class="panel-heading"><h3 class="panel-title">面板标题</h3></div> 
  <div class="panel-body">这是一个基本的面板 </div> 
 </div> 
 <div class="panel panel-warning"> 
  <div class="panel-heading"><h3 class="panel-title">面板标题</h3></div> 
  <div class="panel-body">这是一个基本的面板 </div> 
 </div> 
</div> 
<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
</body> 
</html>

效果图

二、带表格的面板

为了在面板中创建一个无边框的表格，我们可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body，我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>，则组件会无中断地从面板头部移动到表格。

<div class="panel panel-default"> 
  <div class="panel-heading"> 
   <h3 class="panel-title">带 title 的面板标题 </h3> 
  </div> 
  <div class="panel-body"> 面板内容 </div> 
  <table class="table"> 
   <tr> 
    <th>姓名</th> 
    <th>年龄</th> 
   </tr> 
   <tr> 
    <td>李白</td> 
    <td>25</td> 
   </tr> 
   <tr> 
    <td>李白</td> 
    <td>25</td> 
   </tr> 
  </table> 
 </div>

效果图

三、带列表组的面板

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

<div class="panel panel-default"> 
  <div class="panel-heading"> 
   <h3 class="panel-title">面板标题 </h3> 
  </div> 
  <div class="panel-body">这是一个面板。这是一个面板。这是一个面板。这是一个面板。这是一个面板。 
  这是一个面板。这是一个面板。这是一个面板。这是一个面板。 
  这是一个面板。这是一个面板。这是一个面板。这是一个面板。 
  </div> 
  <ul class="list-group"> 
   <li class="list-group-item">唐代诗人李白</li> 
   <li class="list-group-item">唐代诗人李白</li> 
   <li class="list-group-item">唐代诗人李白</li> 
   <li class="list-group-item">唐代诗人李白</li> 
  </ul>  
  
 </div>

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

ng-options和ng-checked在表单中的高级运用(推荐)
AngularJS是当前非常的流行的前端框架，它的语法糖非常多，也极大的方便了前端开发者。这篇文章主要介绍了ng-options和ng-checked在表单中的高级运用,需要的朋友可以参考下
2017-01-01
关于Mozilla浏览器不支持innerText的解决办法
在各大浏览器中，除Mozilla浏览器外，几乎都支持一个元素的属性：innerText。我们可以通过它来快速获取某个元素的内的文本。
2011-01-01
JavaScript 常见安全漏洞和自动化检测技术
js安全漏洞目前存在较大的技术难题，本文结合案例给大家详解JavaScript 常见安全漏洞和自动化检测技术，需要的朋友可以参考下
2015-08-08
使用微信小程序开发前端【快速入门】
本文从代码角度和宏观角度简单阐述了微信小程序在前端领域的一些内容和影响，希望能够帮助那些不了解微信小程序的开发者很快入门并认识这一新的技术领域。
2016-12-12
firebug的一个有趣现象介绍
在FIREBUG里如果一个对象同时拥有length属性和splice方法，就会被firebug显示为数组的形式
2011-11-11
微信小程序实战教程之WXS语法详解
WXS是小程序的一套脚本语言,结合 WXML,wxs类似js和js又不一样,好多js语法能在js使用不能在wxs使用可以构建出页面的结构,这篇文章主要给大家介绍了关于微信小程序实战教程之WXS语法详解的相关资料,需要的朋友可以参考下
2024-09-09
JS实现超简单的仿QQ折叠菜单效果
这篇文章主要介绍了JS实现超简单的仿QQ折叠菜单效果,可实现鼠标滑过列表展开的QQ折叠菜单效果,非常简单实用,需要的朋友可以参考下
2015-09-09
JS高级调试技巧：捕获和分析 JavaScript Error详解
前端工程师都知道 JavaScript 有基本的异常处理能力。我们可以 throw new Error()，浏览器也会在我们调用 API 出错时抛出异常。但估计绝大多数前端工程师都没考虑过收集这些异常信息
2014-03-03
JS实现一个简单的日历
本文主要介绍了用js实现一个日历的示例代码并解析其实现原理，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
ECMAScript6变量的解构赋值实例详解
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring），下文中给大家提供了嵌套数组的解构例子，大家一起看看吧
2017-09-09

Bootstrap面板（Panels）的简单实现代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具