📌  相关文章
📜  bootstarp 5 - CSS (1)

📅  最后修改于: 2023-12-03 15:29:38.445000             🧑  作者: Mango

Bootstrap 5 - CSS

Bootstrap is a popular CSS framework that simplifies the process of designing responsive, mobile-first websites. The latest version of Bootstrap, Bootstrap 5, was released in May 2021 and comes with several new features and improvements.

What's new in Bootstrap 5?

Bootstrap 5 introduces several new features, including:

  • Vanilla JS: Bootstrap 5 is now powered by vanilla JavaScript instead of jQuery, resulting in smaller file sizes and faster page load times.
  • New utility classes: Bootstrap 5 includes new utility classes that make it easier to modify the margins, paddings, and sizes of elements.
  • Improved grid system: The new grid system in Bootstrap 5 includes support for vertical alignment, CSS custom properties, and responsive gutters.
  • Responsive font sizing: Bootstrap 5 includes a new font-sizing utility that automatically adjusts the font size depending on the screen size.
  • Updated components: Some of the components in Bootstrap 5, such as the navbar and dropdowns, have been updated with new features and improvements.
  • New color system: The new color system in Bootstrap 5 includes more shades and tones, making it easier to create custom color schemes.
How to use Bootstrap 5

To use Bootstrap 5 in your projects, you can either download the CSS and JavaScript files from the official website or use a CDN to include them in your HTML file. Here's an example HTML file that uses Bootstrap:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">My Website</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" 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>
    <div class="container mt-5">
        <h1>Welcome to my website</h1>
        <p>This is a sample page using Bootstrap 5.</p>
    </div>
</body>
</html>

In this example, we include the Bootstrap CSS and JavaScript files using a CDN and use some of the new utility classes to add margins and padding to our HTML elements. We also use the updated navbar component to create a responsive navigation menu.

Conclusion

Bootstrap 5 is a powerful CSS framework that can help you create beautiful and responsive websites quickly. With its new features and improvements, it's worth giving it a try in your next project.