Bootstrap 页面标题和面板

本是古典何须时尚 2022-03-21 11:14 242阅读 0赞

### 一、页面标题（Page Header） ###

它会在网页标题四周添加适当的间距和下边框。

<div class="page-header">
       <h3>页面标题实例<small>子标题</small></h3>
    </div>

![20190201112932695.png][]

### 二、面板 ###

面板组件用于把 DOM 组件插入到一个盒子中。

创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可

面板标题：.panel-heading

*  使用 **.panel-heading** class 可以很简单地向面板添加标题容器。
 *  使用带有 **.panel-title** class 的 <h1>-<h6> 来添加预定义样式的标题。

面板内容：.panel-body

面板脚注：.panel-footer

<div class="panel panel-success">
                        <div class="panel-heading">
                            面板标题
                        </div>
                        <div class="panel-body">
                            面板neirong
                        </div>
                        <div class="panel-footer">
                            面板脚注
                        </div>
                    </div>
    
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                带有 title 的面板标题
            </h3>
        </div>
        <div class="panel-body">
            面板内容
        </div>
        <div class="panel-footer">
            面板脚注
        </div>
    
    </div>

![20190202111912648.png][]

[20190201112932695.png]: /images/20220321/9dfd52e9dc5f4c67a61aae0c421a30f2.png
[20190202111912648.png]: /images/20220321/2f2d4cf4a573466db98005ad24b7311b.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 bootstrap面板

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

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

相关页面复杂标题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

深碍√TFBOYSˉ_/ 2022年09月02日 01:14/ 0 赞/ 191 阅读

相关 Bootstrap面板

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

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

相关 Bootstrap超大屏幕和页面标题

Bootstrap支持超大屏幕（jumbotron）,它可以增加标题的大小，并为登陆页面内容添加更多的外边距创建一个带有class.jumbotron的容器

刺骨的言语ヽ痛彻心扉/ 2022年08月23日 08:44/ 0 赞/ 167 阅读

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

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

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

相关 Bootstrap 页面标题和面板

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

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

相关 bootstrap---panel面板组件

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

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

相关 bootstrap38-Bootstrap 下拉菜单-标题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 下拉菜单-标题</title

古城微笑少年丶/ 2022年01月09日 15:49/ 0 赞/ 360 阅读

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

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

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