快速掌握Bootstrap布局

布局基础

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 自动布局列

  1. 等宽列
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>
  1. 设置一个列宽
<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>
  1. 可变宽度内容
<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 响应类

  1. 覆盖所有设备
<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>
  1. 水平排列
<!--在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>
  1. 混合搭配(每一个列都进行不同的设备定义,还可以添加 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>
  1. 删除边距
<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>
  1. 列包装
    如果一行放置超过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 重排序

  1. 排列顺序
    .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>
  1. 列偏移
    在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>
  1. 使用边距通用样式处理,它内置了诸如.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 可见性工具来对网页上的元素进行隐藏,使用它后网页元素对于正常用户是不可见的,但元素的宽高占位依然有效。

上一篇:数据结构与算法之美-4 排序算法2 [MD]


下一篇:全流程指导Visual Studio Code+Markdown Nice+gitee+PicGo管理自己的技术博客文章