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

前言

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

开端

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

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

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

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

初见端倪

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

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

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

css 复制代码
    布局和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),代表不同级别的大小,或者是一个百分比值。

尾声

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

相关推荐
GISer_Jing5 分钟前
前端常问的宏观“大”问题详解(二)
linux·前端·ubuntu
Moment6 分钟前
前端性能指标 —— CLS
前端·javascript·面试
掘金安东尼39 分钟前
上周前端发生哪些新鲜事儿? #407
前端·面试·github
小谭鸡米花1 小时前
ECharts各类炫酷图表/3D柱形图
前端·javascript·echarts·大屏端
郝晨妤1 小时前
【鸿蒙5.0】向用户申请麦克风授权
linux·服务器·前端·华为·harmonyos·鸿蒙
神秘代码行者1 小时前
使用 contenteditable 属性实现网页内容可编辑化
前端·html5
小鱼人爱编程1 小时前
Look My Eyes 最新IDEA快速搭建Java Web工程的两种方式
java·前端·后端
郝晨妤1 小时前
【鸿蒙5.0】鸿蒙登录界面 web嵌入(隐私页面加载)
前端·华为·harmonyos
小鱼人爱编程1 小时前
当上小组长的第3天,我裁掉了2年老员工
前端·后端·面试
晓得迷路了1 小时前
栗子前端技术周刊第 74 期 - 2025 Vue.js 现状报告、Element Plus X、Material UI v7...
前端·javascript·vue.js