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)的简单实现代码

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

Javascript 相关文章推荐
详细讲解JS节点知识
Jan 31 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 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
You might like
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
php GD绘制24小时柱状图
2008/06/28 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
一个简单的js树形菜单
2011/12/09 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
2013/02/02 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python拼接微信好友头像大图的实现方法
2018/08/01 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
pycharm sciview的图片另存为操作
2020/06/01 Python
利用python 读写csv文件
2020/09/10 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
JSF如何进行表格处理及取值
2012/08/06 面试题
北京SQL新华信咨询
2016/09/30 面试题
abstract是什么意思
2012/02/12 面试题
大学本科毕业生求职信范文
2013/12/18 职场文书
年度考核自我评价
2014/01/25 职场文书
普通党员整改措施
2014/10/24 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
农业项目合作意向书
2015/05/08 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
Python超简单容易上手的画图工具库推荐
2021/05/10 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS