编程 Javascript

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

Posted in Javascript onMarch 17, 2017

本文实例为大家分享了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>

效果图

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

二、带表格的面板

为了在面板中创建一个无边框的表格，我们可以在面板中使用 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>

效果图

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

三、带列表组的面板

我们可以在任何面板中包含列表组，通过在 <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>

效果图

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

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

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

- Author -

boonyaxnn

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery实现的元素的left增加N像素鼠标移开会慢慢的移动到原来的位置

Mar 21 Javascript

深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例

Aug 04 Javascript

jquery实现submit提交表单

Feb 03 Javascript

JQuery中DOM事件冒泡实例分析

Jun 13 Javascript

js实现可折叠展开的手风琴菜单效果

Sep 07 Javascript

谈一谈js中的执行环境及作用域

Mar 30 Javascript

js实现为a标签添加事件的方法(使用闭包循环)

Aug 02 Javascript

深入理解react-router@4.0 使用和源码解析

May 23 Javascript

基于LayUI分页和LayUI laypage分页的使用示例

Aug 02 Javascript

其实你可以少写点if else与switch（推荐）

Jan 10 Javascript

Node.js API详解之 repl模块用法实例分析

May 25 Javascript

关于uniApp editor微信滑动问题

Jan 15 Javascript

Bootstrap模态框（Modal）实现过渡效果

Mar 17 #Javascript

详解Vue.js入门环境搭建

Mar 17 #Javascript

使用jquery datatable和bootsrap创建表格实例代码

Mar 17 #Javascript

jquery PrintArea 实现票据的套打功能(代码)

Mar 17 #Javascript

基于bootstrap实现收缩导航条

Mar 17 #Javascript

javascript基本数据类型和转换

Mar 17 #Javascript

详解vue与后端数据交互(ajax)：vue-resource

Mar 16 #Javascript