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

前端之家收集整理的这篇文章主要介绍了Bootstrap面板(Panels)的简单实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

一、基本的面板

HTML代码

Bootstrap list-group <Meta charset="utf-8">

<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 类来创建面板,并在面板中添加列表组。

标题

效果

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

原文链接:https://www.f2er.com/bootstrap/40646.html

猜你在找的Bootstrap相关文章

年龄