如何使用HTML、CSS和Bootstrap创建此类结构？求对应代码实现

Hey there! Let’s build a common, flexible responsive structure—including a navigation bar, sidebar, main content area, and footer—using HTML, CSS, and Bootstrap. This example works for most use cases and is easy to adapt to your needs.

Step 1: Include Bootstrap Resources #

First, add Bootstrap’s core files to your project. Drop these in the <head> and right before the closing </body> tag:

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Bootstrap JS + Popper (for dropdowns/tooltipping) -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

Step 2: Full HTML Structure #

Here’s the complete code for the layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Layout Example</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Navigation Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">MyApp</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content Container -->
    <div class="container-fluid mt-4">
        <div class="row">
            <!-- Sidebar -->
            <aside class="col-lg-3 mb-4 mb-lg-0">
                <div class="card">
                    <div class="card-header bg-secondary text-white">
                        Sidebar Menu
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item"><a href="#" class="text-decoration-none">Item 1</a></li>
                        <li class="list-group-item"><a href="#" class="text-decoration-none">Item 2</a></li>
                        <li class="list-group-item"><a href="#" class="text-decoration-none">Item 3</a></li>
                    </ul>
                </div>
            </aside>

            <!-- Main Content Area -->
            <main class="col-lg-9">
                <div class="card">
                    <div class="card-header bg-info text-white">
                        Main Content
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Welcome to the Main Section</h5>
                        <p class="card-text">This is a responsive layout built with Bootstrap. On large screens, the sidebar sits next to the main content; on smaller devices, it stacks below the navbar for better mobile usability.</p>
                        <button class="btn btn-primary">Learn More</button>
                    </div>
                </div>

                <!-- Additional Content Cards -->
                <div class="row mt-4">
                    <div class="col-md-6 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Card 1</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Card 2</h5>
                                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-dark text-white text-center py-3 mt-5">
        <p>&copy; 2024 MyApp. All rights reserved.</p>
    </footer>

    <!-- Bootstrap JS + Popper -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

Step 3: Custom CSS (styles.css) #

Add these styles to polish the layout and add subtle enhancements:

/* Make sidebar card match main content height */
aside .card {
    min-height: 100%;
}

/* Improve sidebar link hover state */
.list-group-item a:hover {
    color: #0d6efd;
    font-weight: 500;
}

/* Add soft shadow to cards for depth */
.card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Key Features Breakdown #

• Responsive Navbar: Uses navbar-expand-lg to collapse into a hamburger menu on screens smaller than 992px.
• Grid System: The row and col-lg-3/col-lg-9 classes create a 30%/70% split on large screens, which stacks vertically on mobile.
• Bootstrap Components: Leverages built-in tools like card, list-group, and btn to avoid writing custom styles from scratch.
• Custom Tweaks: The CSS adds subtle shadows, adjusts sidebar height, and improves link interactivity for better user experience.

Feel free to tweak this—swap out sidebar content, adjust column widths (e.g., col-md-4 instead of col-lg-3), or change color schemes using Bootstrap’s built-in utility classes (like bg-success or text-warning).

内容的提问来源于stack exchange，提问作者Sohag Gazi