Bootstrap5 固定布局

使用 Bootstrap 创建固定布局

使用 Bootstrap5，我们仍然可以使用固定值的像素创建网页布局，但是容器宽度因视口宽度而异，并且布局也具有响应性。

创建固定但响应式布局的过程基本上从使用`.container`类开始。之后，可以使用`.row`类创建行来放置水平列组。行必须放置在容器中才能正确对齐和填充。

可以使用预定义的网格类（例如.col, ）在行内创建更多列col-{xs|sm|md|lg|xl|xxl}-*，其中*表示网格编号并且应该从 1 到 12。请查看有关Bootstrap 网格系统的教程以了解有关网格类的更多信息。

注意 ：文本、图像、视频、表格等实际内容应放在列中，并且只有列可以是行的直接子项。

以下示例将创建一个固定宽度的响应式布局，在平板电脑等中型设备（视口 ≥ 768 像素）上为 720 像素宽，而在小型笔记本电脑（视口 ≥ 992 像素）等大型设备上为 960 像素宽，在台式机等超大型设备上（视口 ≥ 1200 像素）为 1140 像素宽，在超大型设备（如大型桌面）（视口 ≥ 1400 像素）上宽度为 1320 像素。

但是，在手机等小型设备上（576px ≤ 视口 < 768px），布局宽度为 540px。但是，在超小型设备（视口 < 576px）上，布局将覆盖 100% 的宽度。此外，在这两种情况下，列将垂直堆叠，导航栏将折叠。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">迹忆客</a>
        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Services</a>
                <a href="#" class="nav-item nav-link">About</a>
                <a href="#" class="nav-item nav-link">Contact</a>
            </div>
            <div class="navbar-nav ms-auto">
                <a href="#" class="nav-item nav-link">Register</a>
                <a href="#" class="nav-item nav-link">Login</a>
            </div>
        </div>
    </div>
</nav>
<div class="container">
    <div class="p-5 my-4 bg-light rounded-3">
        <h1>Learn to Create Websites</h1>
        <p class="lead">In today's world internet is the most popular way of connecting with the people. At <a href="https://www.jiyik.com" class="text-success" target="_blank">jiyik.com</a> you will learn the essential web development technologies along with real life practice examples, so that you can create your own website to connect with the people around the world.</p>
        <p><a href="https://www.jiyik.com" target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>HTML</h2>
            <p>HTML is the standard markup language for describing the structure of the web pages. Our HTML tutorials will help you to understand the basics of latest HTML5 language, so that you can create your own web pages or website.</p>
            <p><a href="https://www.jiyik.com/w/html" target="_blank" class="btn btn-success">Learn More »</a></p>
        </div>
        <div class="col-md-4">
            <h2>CSS</h2>
            <p>CSS is used for describing the presentation of web pages. CSS can save a lot of time and effort. Our CSS tutorials will help you to learn the essentials of latest CSS3, so that you can control the style and layout of your website.</p>
            <p><a href="https://www.jiyik.com/w/css" target="_blank" class="btn btn-success">Learn More »</a></p>
        </div>
        <div class="col-md-4">
            <h2>Bootstrap5</h2>
            <p>Bootstrap is a powerful front-end framework for faster and easier web development. Our Bootstrap tutorials will help you to learn all the features of latest Bootstrap 4 framework so that you can easily create responsive websites.</p>
            <p><a href="https://www.jiyik.com/w/bootstrap5" target="_blank" class="btn btn-success">Learn More »</a></p>
        </div>
    </div>
    <hr>
    <footer>
        <div class="row">
            <div class="col-md-6">
                <p>Copyright © 2021 迹忆客</p>
            </div>
            <div class="col-md-6 text-md-end">
                <a href="#" class="text-dark">Terms of Use</a> 
                <span class="text-muted mx-2">|</span> 
                <a href="#" class="text-dark">Privacy Policy</a>
            </div>
        </div>
    </footer>
</div>

尝试一下

我们使用了工具类如.mb-3，.ml-auto，.mx-2等来调整元件之间的间隔。尽管班.text-dark，.text-muted，.text-md-right是文本实用工具类，用来调整颜色和文本的对齐方式。您将在后面的章节中了解它们。