day39 Bootstrap——容器简括

前言

- 前言
- Bootstrap5 容器
- - 容器内边距
  - 容器的边框和颜色
  - 响应式容器

前言

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

Bootstrap5 容器

Bootstrap 需要一个容器元素来包裹网站的内容。我们可以使用以下两个容器类：

.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <br>
    <br>
    <div class="container" style="background-color: green; color: white;">
        <p>container</p>
    </div>
    <div class="container-fluid" style="background-color: blue; color: white;">
        <p>container-fluid</p>
    </div>
</body>

</html>

容器内边距

默认情况下，容器都有填充左右内边距，顶部和底部没有填充内边距。 Bootstrap 提供了一些间距类用于填充边距。比如 .pt-5 就是用于填充顶部内边距：
在这里插入图片描述

<div class="container" style="background-color: green; color: white;">
        <p>container</p>
        <div class="container" style="background-color:purple; color: white;">
            <p>containe pt-5</p>
        </div>
    </div>