Examples of Layer for Bootstrap5

最新推荐文章于 2023-11-24 17:33:48 发布

kagula086

最新推荐文章于 2023-11-24 17:33:48 发布

阅读量465

点赞数

分类专栏： JavaScript或前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/lee353086/article/details/129338246

版权

JavaScript或前端专栏收录该内容

44 篇文章 2 订阅

订阅专栏

该文介绍了Bootstrap5中的三种容器类型——基本容器、响应式容器和流体容器，以及如何使用网格系统创建响应式的布局。通过示例代码展示了不同容器在不同断点下的行为，并提供了固定宽度的容器和全宽容器的用法。此外，还演示了如何利用网格系统创建多列布局和嵌套布局。

摘要由CSDN通过智能技术生成

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>