首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
让你的网站可编辑的实现js代码
Oct 19 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
js转义字符介绍
Nov 05 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 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
404(1) 403(1) xps(1) Stater(1) CAD(1) sout(1) csgo(1) macos(1) XPathParser(1) protocol(1)
You might like
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
微信公众平台开发之天气预报功能
2015/08/31 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
解析python的局部变量和全局变量
2019/08/15 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
在django admin详情表单显示中添加自定义控件的实现
2020/03/11 Python
django列表筛选功能的实现代码
2020/03/27 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
教师个人的自我评价分享
2014/01/02 职场文书
活动志愿者自荐信
2014/01/27 职场文书
社区党务公开实施方案
2014/03/18 职场文书
协议书样本
2014/04/23 职场文书
小学英语课后反思
2014/04/26 职场文书
学校对教师的评语
2014/04/28 职场文书
党员倡议书
2015/01/19 职场文书
2015年中个人总结范文
2015/03/10 职场文书
实验室安全管理制度
2015/08/05 职场文书
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL