该文介绍了Bootstrap5中的三种容器类型——基本容器、响应式容器和流体容器，以及如何使用网格系统创建响应式的布局。通过示例代码展示了不同容器在不同断点下的行为，并提供了固定宽度的容器和全宽容器的用法。此外，还演示了如何利用网格系统创建多列布局和嵌套布局。
Kagula
Mar-4-2023
Introduction
Examples of Layer for Bootstrap5.
Content
Blank Project
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>The HTML file only displays "Hello, world!" in internet explorer.
Container Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<h1>Container Demo</h1>
<hr />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<!--
Bootstrap comes with three different containers:
.container, which sets a max-width at each responsive breakpoint
.container-fluid, which is width: 100% at all breakpoints
.container-{breakpoint}, which is width: 100% until the specified breakpoint
-->
<h2>The first type container</h2>
<!--
Background color
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent
.bg-secondary
The following classes for coloring the text are available:
•text-dark /*Blackish*/
•text-white
•text-light
•text-primary /*The standard blue color*/
•text-secondary /*Grayish color*/
•text-warning /*Orange color*/
•text-success /* Green Color */
•text-danger /*Red color*/
•text-info /*Light blue color*/
•text-muted
-->
<!-- After test, I see the container is as same as container-sm -->
<div class="container bg-info">The first type container</div>
<!-- An example of full width and align a text to left and right by using Flexbox Alignment utilities -->
<div class="container d-flex justify-content-between bg-light">
<div>Left align</div>
<div>center</div>
<div>Right align</div>
</div>
<hr />
<h2>The second type container, container with breakpoint</h2>
<!-- .container-{breakpoint}, which is width: 100% until the specified breakpoint -->
<!-- breakpoint = {sm,md,lg,xl,xxl} -->
<!--
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
-->
<div class="container-sm bg-secondary">100% wide until small breakpoint</div>
<div class="container-md bg-info">100% wide until medium breakpoint</div>
<div class="container-lg bg-secondary">100% wide until large breakpoint</div>
<div class="container-xl bg-info">100% wide until extra large breakpoint</div>
<div class="container-xxl bg-secondary">100% wide until extra extra large breakpoint</div>
<hr />
<h2>The third type container, fluid container</h2>
<div class="container-fluid bg-info">Always full width</div>
<!--
More Info:
https://getbootstrap.com/docs/5.0/layout/containers/
-->
</body>
</html>
Pic1. Container Demo
Grid Demo
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<h1>Grid Demo For Desktop App</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<h2>A Breakpoint Example</h2>
<div class="container bg-light">
<div class="row">
<!--
col-6 is 6/12 ratio in the full width of row.
col-6 is equivalent of col-ms-6.
-->
<!-- col-{breakpoint}-{1 to 12} -->
<!-- breakpoint = {xc,sm, md, lg, xl, xxl} -->
<!-- sm as small device this is default, md as medium device, ... -->
<div class="col-md-6 col-sm-12 bg-info">md=6,sm=12</div>
<div class="col-md-6 col-sm-12" style="background-color:aqua">md=6,sm=12</div>
</div>
</div>
<hr />
<h2>A Nesting Example</h2>
<!--
*Compare to container class, container-fluid class always occupy full width in the page
-->
<div class="container-fluid bg-light-">
<div class="row">
<div class="bg-info" style="width: 32px">32</div>
<div class="col">Header</div>
</div>
<div class="row">
<div style="background-color:aqua;width:32px">32</div>
<div class="bg-info" style="width: 124px">fixed column</div>
<div class="col">
<div class="row">
<div class="row" style="background-color:aqua">The first line of content in nesting</div>
<div class="row" style="background-color:aliceblue">The second line of content in nesting</div>
<div class="row" style="background-color:aqua">The last line of content in nesting</div>
</div>
</div>
<div class="bg-info" style="width:32px">32</div>
</div>
<div class="row">
<div class="col-12 text-center">Foot(text-center)</div>
</div>
</div>
<hr />
<h2>The fixed width container</h2>
<div class="container" style="width: 600px; background-color: aliceblue">
<div class="row">
<div class="bg-info" style="width: 100px">fixed col</div>
<div class="col">Content</div>
</div>
</div>
<!--
More detail reference https://getbootstrap.com/docs/5.0/layout/columns/
-->
</body>
</html>
Pic2. Grid Demo for Desktop App
These are commonly used templates.
https://getbootstrap.com/docs/5.0/getting-started/introduction/
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
