栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

Bootstrap面板(Panels)的简单实现代码

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Bootstrap面板(Panels)的简单实现代码

本文实例为大家分享了Bootstrap面板展示的具体代码,供大家参考,具体内容如下

一、基本的面板

html代码

 
 
 
 Bootstrap list-group 
  
  
  
 body{ 
  margin-top:30px; 
  font-family: '楷体'; 
 } 
 p{ 
  font-size: 18px; 
 } 
  
 
  
 
 
 
      
  
   
   

这是一个基本的面板

只需要向 div元素添加 class .panel 和 class .panel-default

不带 title 的面板标题 面板内容

带 title 的面板标题 面板内容

这是一个基本的面板 .panel panel-footer面板脚注

面板标题 这是一个基本的面板

面板标题 这是一个基本的面板

面板标题 这是一个基本的面板

效果图

二、带表格的面板

为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table。假设有个 包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 ,则组件会无中断地从面板头部移动到表格。

 
   
   

带 title 的面板标题 面板内容
姓名 年龄
李白 25
李白 25

效果图

三、带列表组的面板

我们可以在任何面板中包含列表组,通过在 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组。

 
   
   

面板标题 这是一个面板。这是一个面板。这是一个面板。这是一个面板。这是一个面板。 这是一个面板。这是一个面板。这是一个面板。这是一个面板。 这是一个面板。这是一个面板。这是一个面板。这是一个面板。
  • 唐代诗人李白
  • 唐代诗人李白
  • 唐代诗人李白
  • 唐代诗人李白

效果图

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/89049.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号