容器(Containers)

admin · 发表于 2021-4-5 22:09:53

一.容器分类
1.container
2.container-fluid
3.container-breakpoint

二.容器布局
Extra-small Small Medium Large X-Large XX-Large
<576px          ≥576px ≥768px ≥992px ≥1200px ≥1400px
.container 100% 540px    720px    960px    1140px    1320px
.container-sm 100% 540px    720px    960px    1140px    1320px
.container-md 100% 100%    720px    960px    1140px    1320px
.container-lg 100% 100%    100%    960px    1140px    1320px
.container-xl 100% 100%    100%    100%    1140px    1320px
.container-xxl 100% 100%    100%    100%    100%       1320px
.container-fluid 100% 100%    100%    100%    100%       100%

三.container响应式宽度
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);

四.container实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bs5</title>
<link rel="stylesheet" href="public/bs/css/bootstrap.min.css">
<style>
.container{
height:300px;
}
</style>
</head>
<body>
<div class="container bg-dark">

</div>
</body>
</html>

		自动登录	找回密码
密码			立即注册