bootstrap面板

谁借莪１个温暖的怀抱￠ 2022-10-02 07:45 143阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>bootstrap</title>
    	<style type="text/css">		
    		div.col-xs-3{ 
    			text-align: center;
    		}
    	</style>
    </head>
    <body>
    	<script src="jquery.min.js"></script>
    	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap/3.3.6/bootstrap.min.css">
    	<script src="bootstrap/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    	<div style="width:800px;margin:20px">
    		<div class="panel panel-default">
    			<div class="panel-heading">面板标题</div>
    			<div class="panel-body">
    				面板内容
    			</div>
    			<div class="panel-footer">面板脚注</div>
    		</div>
    		<div class="panel panel-default panel-success">
    			<div class="panel-heading">面板标题</div>
    			<div class="panel-body">
    				面板内容
    			</div>
    			<div class="panel-footer">面板脚注</div>
    		</div>
    		<div class="panel panel-default panel-danger">
    			<div class="panel-heading">面板标题</div>
    			<div class="panel-body">
    				面板内容
    			</div>
    			<div class="panel-footer">面板脚注</div>
    		</div>
    	</div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5MzQ1MQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5MzQ1MQ_size_16_color_FFFFFF_t_70]: /images/20220113/ac83f90032f54a75bc021b730ff93668.png

发表评论取消回复

表情：

评论列表（有 0 条评论，143人围观）

还没有评论，来说两句吧...

相关阅读

相关面板数据面板数据

"这里是黑色高墙自6月25日开始，夏促涌入的一大批萌新开始逐渐入门，开始疯狂的完善自己的build和刷装备，除去一些基本的build的问题之外，我看见过最多的问题就是【xx

比眉伴天荒/ 2024年03月27日 15:00/ 0 赞/ 60 阅读

相关【Bootstrap】017-组件：面板、嵌入内容、Well

目录一、面板 1、基本实例代码演示：运行结果： 2、带标题的面版代码演示：运行结果： 3、带脚注的面版代码演示：运行结果： 4、情境效果

淡淡的烟草味﹌/ 2023年10月05日 11:09/ 0 赞/ 36 阅读

相关 Bootstrap教程(25)--折叠面板、折叠面板导航

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 折叠面板 3. 折叠面板导航 4. 小结 1.

谁借莪１个温暖的怀抱￠/ 2022年11月07日 11:42/ 0 赞/ 234 阅读

相关 bootstrap面板

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

谁借莪１个温暖的怀抱￠/ 2022年10月02日 07:45/ 0 赞/ 144 阅读

相关 Bootstrap面板

1.面板组件用于把DOM组件插入到一个盒子中，创建一个基本面板，只需要添加.panel和panel-default两个类既可。 //基本的面板 <div cl

深碍√TFBOYSˉ_/ 2022年08月23日 08:56/ 0 赞/ 248 阅读

相关 Bootstrap列表组、面板和响应式嵌入组件

列表组组件 > 列表组组件用于显示一组列表的组件 <ul class="list-group">

r囧r小猫/ 2022年06月12日 05:44/ 0 赞/ 188 阅读

相关 Bootstrap 页面标题和面板

一、页面标题（Page Header）它会在网页标题四周添加适当的间距和下边框。 <div class="page-header"

本是古典何须时尚/ 2022年03月21日 11:14/ 0 赞/ 213 阅读

相关 bootstrap---panel面板组件

<!--可以自行修改头部颜色 .panel panel-success .panel panel-danger .panel panel-i

桃扇骨/ 2022年02月21日 07:39/ 0 赞/ 295 阅读

相关响应式前端框架Bootstrap系列（15）面板

面板组件用于把 DOM 组件插入到一个盒子中，比如组件表格或者列表组。面板的主要界面效果用于如超市的物价面板、动车进出站实时信息面板等。有关面板的样式有以下几种： .pane

待我称王封你为后i/ 2021年09月14日 14:20/ 0 赞/ 463 阅读

相关深入理解BootStrap-- 面板(panel)

1、面板面板（`Panels`）是`Bootstrap`框架新增的一个组件，其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码： ☑

忘是亡心i/ 2021年06月26日 16:06/ 0 赞/ 745 阅读