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 相关文章推荐
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
webpack常用配置项配置文件介绍
Nov 07 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
Aug 27 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
php 远程关机操作的代码
2008/12/05 PHP
优化PHP代码技巧的小结
2013/06/02 PHP
CI框架中$this-&gt;load-&gt;library()用法分析
2016/05/18 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
PHP实现添加购物车功能
2017/03/06 PHP
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
使用Python生成XML的方法实例
2017/03/21 Python
python检索特定内容的文本文件实例
2018/06/05 Python
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
Python如何telnet到网络设备
2021/02/18 Python
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
超市营业员岗位职责
2013/12/20 职场文书
十佳教师事迹材料
2014/01/11 职场文书
国培教师自我鉴定
2014/02/12 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
财务总监岗位职责
2015/02/03 职场文书
党员证明模板
2015/06/19 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书