Bootstrap面板（Panels）的简单实现代码

本文实例为大家分享了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>

效果图

二、带表格的面板

为了在面板中创建一个无边框的表格，我们可以在面板中使用 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>

效果图

三、带列表组的面板

我们可以在任何面板中包含列表组，通过在 <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>

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Bootstrap源码解读媒体对象、列表组和面板（10）

    媒体对象 基础媒体对象 例如: <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://placehold.it/350x150" alt="..."> </a> <div class="media-bo

  • Bootstrap面板使用方法

    面板样式是在很多种情况下都可能会使用到的样式之一,例如博客的侧边栏.企业网站的公告栏.栏目列表等. 面板样式除了内容之外,还有一个面板头部可以添加标题,让我们通过这篇文章看看Bootstrap面板样式的使用方法. Bootstrap面板基本样式 直接调用面板样式也非常容易,只需要通过以下代码即可实现: <div class="panel panel-default"> <div class="panel-body"> Basic panel

  • Bootstrap面板学习使用

    Bootstrap面板学习使用

    本文实例为大家分享了Bootstrap面板的具体实现代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu

  • 浅析Bootstrap组件之面板组件

    浅析Bootstrap组件之面板组件

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了类.panel的样式,产生一个具有边框的文本显示块,由于panel不控制主题颜色,所以在.panel基础上增加一个控制

  • Bootstrap基本组件学习笔记之面板(14)

    Bootstrap基本组件学习笔记之面板(14)

    直接看Bootstrap面板例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bo

  • 基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard

    基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard

    这是一款基于Bootstrap的Metro风格的后台管理面板应用,Bootstrap Metro Dashboard的UI是基于Twitter Bootstrap样式的,同时使用了jQuery 1.9.1和jQuery UI组件,非常适合做网站的后台管理系统界面. Bootstrap Metro Dashboard介绍  Bootstrap Metro Dashboard使用了以下jQuery插件:  fullcalendar.min.js jquery.chosen.min.js jquery

  • Bootstrap每天必学之面板

    Bootstrap每天必学之面板

    1.面板 面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能.同样在不同的版本中具有不同的源码: ☑ Less版本:对应的源码文件是 panels.less ☑ Sass版本:对应的源码文件是 _panels.scss ☑ 编译后的Bootstrap:对应bootstrap.css文件第4995行-第5302行 2.面板–基础面板 基础面板非常简单,就是一个div容器运用了"panel"样式,产生一个具有边框的文本显示块.由于&

  • Bootstrap显示与隐藏简单实现代码

    Bootstrap显示与隐藏简单实现代码

    本文实例为大家分享了bootstrap显示隐藏的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,

  • Bootstrap导航中表单简单实现代码

    Bootstrap导航中表单简单实现代码

    导航中图标,表单的编程: <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <

  • Bootstrap面板（Panels）的简单实现代码

    Bootstrap面板（Panels）的简单实现代码

    本文实例为大家分享了Bootstrap面板展示的具体代码,供大家参考,具体内容如下 一.基本的面板 html代码 <!DOCTYPE html> <html> <head> <title>Bootstrap list-group</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.mi

  • Bootstrap栅格系统简单实现代码

    Bootstrap栅格系统简单实现代码

    Bootstrap栅格系统的简单介绍,供大家参考,具体内容如下 栅格系统:总共分为12个,超过12个会自动换行,可嵌套,嵌套也不可超过12个,且不会超过父栏 代码: <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewpor

  • Bootstrap表单简单实现代码

    Bootstrap表单简单实现代码

    本文实例为大家分享了Bootstrap表单的具体实现代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width,

  • 基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

    基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码

    Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式,有双向绑定,指令等特性,这是具有革命性的.我是多么反感jQuery 用选择器 选择元素 ,绑定事件,进行一大堆DOM操作,一旦代码过多,非常不好维护,html结构改变,又要重写js代码,不过 jQuery  对 ajax的

  • 封装的dialog插件 基于bootstrap模态对话框的简单扩展

    在使用bootstrap 模态对话框时需要在页面写对话框html,如果一个页面有许多地方需要对话框,那意味着需要写多个,感觉很麻烦,平时不太习惯bootstrap 模态对话框这种方式,所以做了个简单封装及扩展,增加了自定义标题,宽度和高度,并根据宽高居中显示. 默认属性: id:"modal",//弹窗id title:"dialog",//弹窗标题 width:"600",//弹窗宽度,暂时不支持% height:"500"

  • Bootstrap Modal遮罩弹出层代码分享

    下面这段代码并非是Bootstrap的遮罩,只是简单版的遮罩效果,Bootstrap那个太啰嗦了.如果你钟情Bootstrap的那个遮罩,来看看这篇文章"完全版:Bootstrap弹出层遮罩". <div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:void(0);" title="关闭&qu

随机推荐