快速掌握Bootstrap布局

2023-12-12 22:53:46

布局基础

1 布局容器

Bootstrap中定义了两个容器类，分别为.container和.container-fluid。容器是bootstrap中最基本的布局元素，在使用默认网格系统时是必需的。

Container容器和container-fluid容器最大的不同之处在于宽度的设定。
Container容器根据屏幕宽度的不同，会利用媒体查询设定固定的宽度，当改变浏览器的大小时，页面会呈现阶段性变化。意味着Container容器的最大宽度在每个断点都发生变化。

2 响应断点

/ 超小设备（xs，小于576像素）。
// 没有媒体查询"xs"，因为在 Bootstrap 中是默认的。
// 小型设备 (sm，576像素及以上)
@media (min-width: 576像素) { ... }
// 中型设备（md，768像素及以上）
@media (min-width: 768像素) { ... }

// 大型设备（lg，992像素及以上）
@media (min-width: 992像素) { ... }
// 超大型设备（xl，1200像素及以上）
@media (min-width: 1200像素) { ... }

由于在Sass中编写源CSS，因此所有的媒体查询都可以通过Sass mixins获得：
// xs断点不需要媒体查询，因为它实际上是'@media (min-width: 0){…}'
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

3 z-index

一些bootstrap4组件使用了z-index样式属性。z-index属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。Bootstrap4利用该属性来安排内容，帮助控制布局。
Bootstrap4中定义了相应的z-index标度，对导航、工具提示和弹出窗口、模态框等进行分层。
$zindex-dropdown:          1000 !default;
$zindex-sticky:             1020 !default;
$zindex-fixed:              1030 !default;
$zindex-modal-backdrop:     1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:            1060 !default;
$zindex-tooltip:             1070 !default;
提示：不推荐自定义z-index属性值，如果改变了其中一个，可能需要改变所有的。

网格系统

1 网格选项

设备从小到大排序xs(小于576像素),sm(大于等于576像素)，md(大于768等于像素)，lg(大于等于992像素)，xl(大于等于1200像素)

2 自动布局列

等宽列

div class="row">
    <div class="col-8 border py-1 bg-light1">二分之一</div><!--col有多少格,总共12格，col后可加数字; border容器的边框 py-上下内边距 背景色-->
    <div class="col border py-3 bg-light1">二分之一</div>
</div>
<div class="row"><!-- class="row"是每一行-->
    <div class="col border py-3 bg-light1">三分之一</div>
    <div class="col border py-3 bg-light1">三分之一</div>
    <div class="col border py-3 bg-light1">三分之一</div>
</div>
<div class="row">
    <div class="col border py-3 bg-light1">四分之一</div>
    <div class="col border py-3 bg-light1">四分之一</div>
    <div class="col border py-3 bg-light1">四分之一</div>
    <div class="col border py-3 bg-light1">四分之一</div>
</div>

设置一个列宽

<div class="row"><!-- class="row"是每一行-->
    <div class="col border py-3 bg-light">左</div>
    <div class="col-7 border py-3 bg-light">中</div>
    <div class="col border py-3 bg-light">右</div>
</div>

可变宽度内容

<div class="row justify-content-md-center">
    <!--设备从小到大排序xs(小于576像素),sm(大于等于576像素)，md(大于768等于像素)，lg(大于等于992像素)，xl(大于等于1200像素)-->
    <div class="col col-lg-2 border py-3 bg-light">左</div>
    <!--col-md-auto border py-3 bg-light这个为什么这样分布呢，可看下视频，2个相同的大的布局，包含1个小的布局，有啥技巧么-->
    <div class="col-md-auto border py-3 bg-light">中（在屏幕尺寸≥768px时，可根据内容自动调整列宽度）</div>
    <div class="col col-lg-2 border py-3 bg-light">右</div>
</div>

4. 等宽多列（可研究）

div class="row">
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="w-100"></div><!--class="w-100"可把一行的元素分成2行-->
    <div class="col border py-3 bg-light">四分之一</div>
    <div class="col border py-3 bg-light">四分之一</div>
</div>

3 响应类

覆盖所有设备

<div class="row">
    <div class="col-8 border py-3 bg-light">col-8</div>
    <div class="col-4 border py-3 bg-light">col-4</div>
</div>

水平排列

<!--在sm（≥576px）型设备上开始水平排列-->
<div class="row">
    <div class="col-sm-8 border py-3 bg-light">col-sm-8</div>
    <div class="col-sm-4 border py-3 bg-light">col-sm-4</div>
</div>
<!--在md（≥768px）这里的px代表的是屏幕页面的宽度，型设备上开始水平排列-->
<div class="row">
    <div class="col-md-8 border py-3 bg-light">col-md-8</div>
    <div class="col-md-4 border py-3 bg-light">col-md-4</div>
</div>

混合搭配（每一个列都进行不同的设备定义，还可以添加 sm,lg,xs等设备）

<!--在小于md型的设备上显示为一个全宽列和一个半宽列，在大于等于md型设备上显示为一列，分别占8份和4份-->
<div class="row">
    <div class="col-12 col-md-8 border py-3 bg-light">.col-12 .col-md-8</div>
    <div class="col-6 col-md-4 border py-3 bg-light">.col-6 .col-md-4</div>
</div>
<!--在任何类型的设备上，列的宽度都是占50%-->
<div class="row">
    <div class="col-6 border py-3 bg-light">.col-6</div>
    <div class="col-6 border py-3 bg-light">.col-6</div>
</div>

删除边距

<div class="row no-gutters"> <!--采用 no-gutters删除边距；Bootstrap默认的网格和列间有间距，一般是左右-15px的margin或padding -->
    <div class="col-12 col-sm-6 col-md-8 py-3 border bg-light">.col-12 .col-sm-6 .col-md-8</div>
    <div class="col-6 col-md-4 py-3 border bg-light">.col-6 .col-md-4</div>
    <!--很小，就是两列直接的距离-->
</div>

列包装
如果一行放置超过12列，则每组额外列将作为一个单元包裹到新行

<div class="row">
    <div class="col-9 py-3 border bg-light">.col-9</div>
    <!--如果一行放置超过12列，则每组额外列将作为一个单元包裹到新行上-->
    <div class="col-4 py-3 border bg-light">.col-4<br>因为9 + 4 = 13 >12，4列宽的div被包装到一个新行上，作为一个连续的单元。</div>
    <div class="col-6 py-3 border bg-light">.col-6<br>后续的列沿着新行继续排列。</div>
</div>

4 重排序

排列顺序
.order-1到.order-12等12个级别的顺序;还有order-first更改顺序到最前面；order-last更改顺序到最后面

<div class="row">
    <!--order-*类选择符可对空间进行可视化排序 ，没有定义order类的元素，将默认排在前面-->
    <div class="col order-12 py-3 border bg-light">
        order-12
    </div>
    <div class="col order-1 py-3 border bg-light">
        order-1
    </div>
    <div class="col order-6 py-3 border bg-light">
        order-6
    </div>
    <div class="col py-3 border bg-light">
        col
    </div>
</div>

列偏移
在bootstrap中可以使用两种方式进行列偏移：
使用响应式的.offset-类偏移方法。
使用边距通用样式处理，它内置了诸如.ml-、.p-、.pt-等实用工具。
.offset-*类偏移方法

<div class="row">
    <div class="col-md-6 offset-md-3 py-3 border bg-light">.col-md-6 .offset-md-3</div>
</div>
<div class="row">
    <div class="col-md-4 offset-md-1 py-3 border bg-light">.col-md-4 .offset-md-1</div>
    <div class="col-md-4 offset-md-2 py-3 border bg-light">.col-md-4 .offset-md-2</div>
</div>

使用边距通用样式处理，它内置了诸如.ml-、.p-、.pt-*

<div class="row">
    <!--ml* p-* pt-* -->
    <div class="col-md-4 py-3 border bg-light">.col-md-4</div>
    <div class="col-md-4 ml-auto py-3 border bg-light">.col-md-4 .ml-auto</div>
</div>

5 列嵌套（不懂）

如果想在网格系统中将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-元素到已经存在的.col-sm-元素内。被嵌套的行（row）所包含的列（column）数量推荐不要超过12个。

<div class="row">
    <div class="col-12 col-lg-6"> <!--col-12 col-lg-6使用了这个嵌套，固定了下面的div在一定像素下就是一行-->
        <!--嵌套行-->
        <div class="row border no-gutters">
            <div class="col-12 col-sm-3"><img src="images/b.jpg" alt=""></div>
            <div class="col-12 col-sm-9 pl-3"><!--pl-3是文字离图片的边据-->
                李白诗歌的语言，有的清新如同口语，有的豪放，不拘声律，近于散文，但都统一在“清水出芙蓉，天然去雕饰”的自然美之中。
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6">
        <!--嵌套行-->
        <div class="row border no-gutters">
            <div class="col-12 col-sm-3"><img src="images/c.jpg" alt=""></div>
            <div class="col-12 col-sm-9 pl-3">
                在杜甫中年因其诗风沉郁顿挫，忧国忧民，杜甫的诗被称为“诗史”。他的诗词以古体、律诗见长，风格多样，以“沉郁顿挫”四字准确概括出他自己的作品风格，而以沉郁为主。
            </div>
        </div>
    </div>
</div>

布局工具类

1 display块属性定义

使用bootstrap的实用程序来响应地切换display属性的值，将其与网格系统、内容或组件混合使用，以便在特定的视图中显示或隐藏它们

2 Flexbox选项

Bootstrap 4是基于Flexbox流式布局，大多数组件都支持Flex流式布局，但不是所有元素的display都是默认就启用display:flex属性的(因为那样会增加很多不必要的DIV层叠，并会影响到浏览器的渲染)。
如果需要将display: flex添加到元素中，可以使用.d-flex或响应式变体(例如.d-sm-flex)。需要这个类或display值来允许使用额外的flexbox实用程序来调整大小、对齐、间距等。

3 外边距和内边距

使用外边距和内边距实用程序来控制元素和组件的间距和大小。Bootstrap 4包含一个用于间隔实用程序的5级刻度，基于1rem值默认$spacer变量。为所有视图选择值(例如，.mr-3用于右边框:1rem)，或为目标特定视图选择响应变量(例如，.mr-md-3用于右边框:1rem，从md断点开始)。

4 切换显示和隐藏

如果不使用display对元素进行隐藏（或无法使用时），可以使用visibility这个BootStrap 可见性工具来对网页上的元素进行隐藏，使用它后网页元素对于正常用户是不可见的，但元素的宽高占位依然有效。

码农公寓