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 相关文章推荐
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
js print打印网页指定区域内容的简单实例
Nov 01 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
VsCode里的Vue模板的实现
Aug 12 Javascript
antd table按表格里的日期去排序操作
Nov 17 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
php 抽象类的简单应用
2011/09/06 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
JS过滤url参数特殊字符的实现方法
2013/12/24 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
vue keep-alive 动态删除组件缓存的例子
2019/11/04 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
[02:22:36]《加油!DOTA》总决赛
2014/09/19 DOTA
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Python定义函数实现累计求和操作
2020/05/03 Python
纯CSS3实现扇形动画菜单(简化版)实例源码
2017/01/17 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
测试工程师岗位职责
2013/11/28 职场文书
实习求职信
2013/12/01 职场文书
寒假实习自荐信
2014/01/26 职场文书
集中整治工作方案
2014/05/01 职场文书
店长岗位职责
2015/02/11 职场文书
2019个人半年工作总结
2019/06/21 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
pytorch 如何使用float64训练
2021/05/24 Python