加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-18 00:39:39 所属栏目:安全 来源:网络整理
导读:本文实例为大家分享了Bootstrap面板展示的具体代码,供大家参考,具体内容如下 一、基本的面板 html代码 Bootstrap list-group div class="container" div class="panel panel-danger" h3 class="list-group-item-heading"这是一个基本的面板 只需要向 div元

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

一、基本的面板

html代码

Bootstrap list-group

<div class="container">

<div class="panel panel-danger">

<h3 class="list-group-item-heading">这是一个基本的面板

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

效果图

二、带表格的面板

为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table。假设有个

包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的
,则组件会无中断地从面板头部移动到表格。

姓名

效果图

三、带列表组的面板

我们可以在任何面板中包含列表组,通过在

元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组。

效果图

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

年龄