Bootstrap CSS组件

CSS组件

5.1 模态框（Modal）

模态框是一种弹出式窗口，用于在不离开当前页面的情况下显示额外的内容。以下是一个简单的模态框示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5入门示例</title>
    <!-- 引入Bootstrap的CSS文件 -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
</head>

<body>

    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open Modal
</button>

    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    This is the content of the modal.
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 引入Bootstrap的JavaScript文件，需要在body底部引入 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>
</body>

</html>

显示效果，点击按钮会弹出一个模态确认框：

5.2 折叠面板（Collapse）

折叠面板用于创建可折叠的内容区域。以下是一个折叠面板示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5入门示例</title>
    <!-- 引入Bootstrap的CSS文件 -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
</head>

<body>

    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    Content for Accordion Item #1
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
            </h2>
            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    Content for Accordion Item #2
                </div>
            </div>
        </div>
    </div>
    <!-- 引入Bootstrap的JavaScript文件，需要在body底部引入 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>
</body>

</html>

效果，点击可折叠：

5.3 标签页（Tabs）

标签页组件允许在同一区域内切换不同内容。以下是一个标签页示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5入门示例</title>
    <!-- 引入Bootstrap的CSS文件 -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.3.0.css">
</head>

<body>

    <ul class="nav nav-tabs" id="myTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
        </li>
    </ul>

    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
            Content for Home tab.
        </div>
        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
            Content for Profile tab.
        </div>
        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
            Content for Contact tab.
        </div>
    </div>
    <!-- 引入Bootstrap的JavaScript文件，需要在body底部引入 -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap.5.3.0.js"></script>
</body>

</html>

效果，点击可切换tab：

上篇 Bootstrap基础组件 Bootstrap表单和输入下篇

Bootstrap CSS组件

网友评论0