bootstrap入门【面板】

最新推荐文章于 2024-07-20 15:49:14 发布

原创最新推荐文章于 2024-07-20 15:49:14 发布 · 600 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

107 篇文章

订阅专栏

本文深入探讨了信息技术领域的多个方面，包括前端开发、后端开发、移动开发、游戏开发、大数据开发等细分技术领域，提供了全面的技术知识概览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="panel panel-default panel-info">
    <div class="panel-heading">
        带标题的面板
    </div>
    <div class="panel-body">
        zhangyugegehahahahahah
    </div>
    <div class=" panel-footer panel-warning">o</div>
</div>      面板头部，身体，脚部三部分，很清晰

<table class="table">
    <thread>
        <tr class="active">
            <th>表格标题</th>
            <th>表格标题</th>
            <th>表格标题</th>
        </tr>
    </thread>
    <tbody>
        <tr class="success">
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr class="success">
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
        <tr class="success">
            <td>表格单元格</td>
            <td>表格单元格</td>
            <td>表格单元格</td>
        </tr>
    </tbody>
</table>           嵌入了前面学到过的表格<thread>  标题部分   <tbody>  单元格内容部分

<div class="panel panel-default">
    <div class="panel-heading">
        hello
    </div>
    <div class="panel-body">
        world
    </div>
    <ul class="list-group">
        <li class="list-group-item">1</li>
        <li class="list-group-item">2</li>
        <li class="list-group-item">3</li>
        <li class="list-group-item">4</li>
    </ul>
</div>            嵌入无序列表


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

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">
                hello world
            </div>
        </div>

        <div class="panel panel-default panel-info">
            <div class="panel-heading">
                带标题的面板
            </div>
            <div class="panel-body">
                zhangyugegehahahahahah
            </div>
            <div class=" panel-footer panel-warning">o</div>
        </div>
        <p>带表格的面板</p>
        <div class="panel panel-default">
            <div class="panel-heading">
                lailailai
            </div>
            <div class="panel-body">
                jhsfwefuweyg
            </div>
            <table class="table">
                <thread>
                    <tr class="active">
                        <th>表格标题</th>
                        <th>表格标题</th>
                        <th>表格标题</th>
                    </tr>
                </thread>
                <tbody>
                    <tr class="success">
                        <td>表格单元格</td>
                        <td>表格单元格</td>
                        <td>表格单元格</td>
                    </tr>
                    <tr class="success">
                        <td>表格单元格</td>
                        <td>表格单元格</td>
                        <td>表格单元格</td>
                    </tr>
                    <tr class="success">
                        <td>表格单元格</td>
                        <td>表格单元格</td>
                        <td>表格单元格</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                hello
            </div>
            <div class="panel-body">
                world
            </div>
            <ul class="list-group">
                <li class="list-group-item">1</li>
                <li class="list-group-item">2</li>
                <li class="list-group-item">3</li>
                <li class="list-group-item">4</li>
            </ul>
        </div>
    </div>

</body>
</html>