Bootstrap流容器和固定容器

一、什么是容器?

Bootstrap 4 开始需要一个容器元素来包裹网站的内容,说白了就是要用一些标签来装其他的标签,这样便于我们对网页做整体的布局设计,一般我们选择用div来做容器,对应的容器类有两个,一个是固定容器 .container 一个是流容器 .container-fluid。

二、容器类

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

固定容器的阈值如下图:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>bootstarp</title>

    <!--Bootstrap-->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!--jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边)-->
    <script src="js/jquery-3.5.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <!--
    固定容器的响应式布局规则是当窗口大小变化时，在指定的宽度范围内使用固定的宽度
    流容器的响应式布局规则是随着窗口大小的变化一同变化，横向全部占满
    -->
    <div class="container">
        <h1 style="color: #1b6d85">非必要不离穗！</h1>
        <p>
            刚刚，广州市疫情防控新闻发布会通报，广州发现一例境外输入奥密克戎阳性病例。根据疫情防控需要，广州市划定封控区、管控区、防范区各1个。同时，即日起封闭地铁5号线淘金站B出入口，管控区域部分公交站点有所调整，暂停防范区内的巡游车、网约车运营。今日6时起，所有从白云机场乘机出发的旅客，在测温和查验健康码的基础上，须查验行程码
        </p>
    </div>

    <div class="container-fluid">
        <h1 style="color: #1b6d85">极目锐评｜孙海洋希望注销孙卓黑户口，被拐孩子的户口问题必须追究到底</h1>
        <p>
            近日，电影《亲爱的》原型孙海洋找到被拐14年的儿子孙卓，引发持续关注。12月14日，孙海洋告诉记者，孙卓已决定回深圳读书，此前他在湖北监利老家的户口一直没注销，所以希望能注销在黑龙江的黑户口，相关部门能帮忙办理入学手续。（据12月14日极目新闻）
        </p>
    </div>

</body>
</html>
posted @ 2021-12-15 17:01  酒剑仙*  阅读(242)  评论(0)    收藏  举报