day39 Bootstrap——容器简括-编程知识

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>