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预览上传图片发现的问题的解决方法
Nov 25 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
JS实现往下不断流动网页背景的方法
Feb 27 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
模拟javascript中的sort排序(简单实例)
Aug 17 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 Javascript
JavaScript实现前端网页版倒计时
Mar 24 Javascript
一文帮你理解PReact10.5.13源码
Apr 03 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实现WEB动态网页静态
2006/10/09 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
使用php shell命令合并图片的代码
2011/06/23 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
详解package.json版本号规则
2019/08/01 Javascript
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
OpenCV实现人脸识别
2017/04/07 Python
python爬取个性签名的方法
2018/06/17 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
如何学习Python time模块
2020/06/03 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
五年级英语教学反思
2014/01/31 职场文书
高级编程求职信模板
2014/02/16 职场文书
《这儿真好》教学反思
2014/02/22 职场文书
远程培训的心得体会
2014/09/01 职场文书
升学宴学生答谢词
2015/01/05 职场文书
开学典礼致辞
2015/07/29 职场文书