关于使用Bootstrap实现响应式设计的一些感想

前言

最近在写一个项目，要求使用响应式设计，这可让我十分头疼，又要临时学一下bootstrap，一路学下来，不能说是收获满满，但也是有一些心得体会，于是在此记录。

开端

想必各位读者开始学习bootstrap时，最先接触到的关于响应式的知识应该是两个容器类——“container”和”container-fluid“类，这两个类本身就是响应式的。但是在写代码时我遇到过这两个类失效的情况，具体体现在页面可以左右滑动，右侧留有一定的空白区域，这显然不符合响应式设计的理念，后经检查，发现时容器类中的子元素宽度超出了容器类本身的宽度，造成了这种现象，解决方法是使用flex布局，或者宽度采用百分比设置。

承接上文，我们进而可以得出两个比较重要的经验，即在进行响应式设计时

1.元素的宽度一般情况下不能是固定的（对于某些处于页面中间，且宽度比较小的元素可以另当别论，这里一般指的是容器div）

2.元素尽量不要采用绝对定位和固定定位

初见端倪

入门bootstrap得到的第一个法宝应该可以说是‘栅格系统’了，但当我具体开始写代码时，我发现可能是我自身对‘栅格系统’的了解不深，导致我觉得其功能非常有限，对于复杂的布局显得捉襟见肘，而且还经常会打乱已有的布局。于是有一段时间，我大概是被网上的文档和视频给迷惑了（这类视频很少），导致我不禁发问：“就这？”

但是，随着自己的摸索，加上对ai提问得到的一些知识，我有了新的发现，其实我远远没有发掘出bootstrap真正的实力，以下是我近期新的认识。

首先，深入学习之后，我发现bootstrap的一个很大的特点是自带了很多的预定义类，我们使用这些类可以少些很多CSS代码，之前我大多接触到的是类似“mt-3”、“bg-dark”、“text-white”这些类，这里面关于响应式的类其实我还没有发掘多少，但后来我发现，只要对原有的一些类加上‘断点’，就可以实现很多响应式的要求。我在这里记录下一部分。

    布局和Flexbox:
        .d-{breakpoint}-inline: 内联显示。
        .d-{breakpoint}-inline-block: 内联块级显示。
        .d-{breakpoint}-block: 块级显示。
        .d-{breakpoint}-grid: 栅格显示。
        .d-{breakpoint}-table: 表格显示。
        .d-{breakpoint}-table-row: 表格行显示。
        .d-{breakpoint}-table-cell: 表格单元格显示。
        .d-{breakpoint}-flex: Flexbox 容器。
        .d-{breakpoint}-inline-flex: 内联 Flexbox 容器。

    Flex 项目对齐:
        .align-items-{breakpoint}-start: Flex 项目在交叉轴上向开始对齐。
        .align-items-{breakpoint}-end: Flex 项目在交叉轴上向结束对齐。
        .align-items-{breakpoint}-center: Flex 项目在交叉轴上居中对齐。
        .align-items-{breakpoint}-baseline: Flex 项目在交叉轴上基线对齐。
        .align-items-{breakpoint}-stretch: Flex 项目在交叉轴上拉伸对齐。

    Flex 内容对齐:
        .justify-content-{breakpoint}-start: Flex 项目在主轴上向开始对齐。
        .justify-content-{breakpoint}-end: Flex 项目在主轴上向结束对齐。
        .justify-content-{breakpoint}-center: Flex 项目在主轴上居中对齐。
        .justify-content-{breakpoint}-between: Flex 项目在主轴上分散对齐。
        .justify-content-{breakpoint}-around: Flex 项目在主轴上均匀分布。

    边距:
        .m-{breakpoint}-{size}: 设置所有方向的外边距。
        .mt-{breakpoint}-{size}: 设置顶部外边距。
        .mb-{breakpoint}-{size}: 设置底部外边距。
        .mr-{breakpoint}-{size}: 设置右侧外边距。
        .ml-{breakpoint}-{size}: 设置左侧外边距。

    填充:
        .p-{breakpoint}-{size}: 设置所有方向的内边距。
        .pt-{breakpoint}-{size}: 设置顶部内边距。
        .pb-{breakpoint}-{size}: 设置底部内边距。
        .pr-{breakpoint}-{size}: 设置右侧内边距。
        .pl-{breakpoint}-{size}: 设置左侧内边距。

    显示:
        .d-{breakpoint}-none: 在特定断点隐藏元素。
        .d-{breakpoint}-inline: 在特定断点将元素显示为内联元素。
        .d-{breakpoint}-inline-block: 在特定断点将元素显示为内联块级元素。
        .d-{breakpoint}-block: 在特定断点将元素显示为块级元素。
        .d-{breakpoint}-table: 在特定断点将元素显示为表格。
        .d-{breakpoint}-table-row: 在特定断点将元素显示为表格行。
        .d-{breakpoint}-table-cell: 在特定断点将元素显示为表格单元格。
        .d-{breakpoint}-flex: 在特定断点将元素设置为Flex容器。
        .d-{breakpoint}-inline-flex: 在特定断点将元素设置为内联Flex容器。

    文本对齐:
        .text-{breakpoint}-left: 在特定断点文本左对齐。
        .text-{breakpoint}-right: 在特定断点文本右对齐。
        .text-{breakpoint}-center: 在特定断点文本居中。

    浮动:
        .float-{breakpoint}-left: 在特定断点元素左浮动。
        .float-{breakpoint}-right: 在特定断点元素右浮动。
        .float-{breakpoint}-none: 在特定断点元素不浮动。

    宽度和高度:
        .w-{breakpoint}-{size}: 设置宽度。
        .h-{breakpoint}-{size}: 设置高度。

    其他:
        .overflow-{breakpoint}-auto: 设置特定断点的溢出为自动。
        .overflow-{breakpoint}-hidden: 设置特定断点的溢出为隐藏。

说明：这里的 {breakpoint} 可以是 sm, md, lg, xl, 或 xxl，代表不同的屏幕尺寸断点。{size} 是一个数字（如1到5），代表不同级别的大小，或者是一个百分比值。

尾声

写的差不多了，记录暂时先到这里，后续学习到新知识还会进行分享，唉，又要敲代码去了，拜拜了各位！