Bootstrap CSS——面板组件

最新推荐文章于 2024-04-06 16:24:37 发布

Tarkzeng

最新推荐文章于 2024-04-06 16:24:37 发布

阅读量1k

点赞数

分类专栏： Bootstrap 文章标签： bootstrap css

本文链接：https://blog.csdn.net/u011350527/article/details/48954001

版权

Bootstrap 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

http://v3.bootcss.com/components/#panels
mark

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>面板</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                Hello World!
            </div>
        </div>

        <!--带标题的panel-->
        <div class="panel panel-info">
            <div class="panel-heading">
                学习的网站
            </div>

            <div class="panel-body">
                希望你来量投，我们永远欢迎你
            </div>

            <!--带脚标的panel-->
            <div class="panel-footer panel-danger">
                www.baidu.com
            </div>
        </div>

        <!--带表格的panel-->
        <div class="panel panel-default">
            <div class="panel-heading">
                哆来咪法索
            </div>
            <div class="panel-body">
                <p>啊噢额咦唔</p>
            </div>
            <table class="table">
                <thead>
                    <tr class="active">
                        <th>表格标题</th>
                        <th>表格标题</th>
                        <th>表格标题</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="danger">
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                    </tr>
                    <tr class="success">
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                    </tr>
                    <tr class="info">
                        <td>单元格</td>
                        <td>单元格</td>
                        <td>单元格</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!--带列表的panel-->
        <div class="panel panel-default">
            <div class="panel-heading">
                带列表的panel
            </div>
            <div class="panel-body">
                World!
            </div>
            <ul class="list-group">
                <li class="list-group-item">Hello1</li>
                <li class="list-group-item">Hello2</li>
                <li class="list-group-item">Hello3</li>
            </ul>
        </div>

    </div>
</body>
</html>

Tarkzeng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap CSS——面板组件

http://v3.bootcss.com/components/#panels mark<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>面板</title> <link rel="stylesheet" href="bootstrap.min.css"></head><body
复制链接

扫一扫

专栏目录