Bootstrap 间距实用类

2024-06-16 01:20
文章标签 实用 bootstrap 间距

本文主要是介绍Bootstrap 间距实用类,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Bootstrap 间距实用类(Spacing Utilities)

Bootstrap 提供了一套强大的实用类,用于快速设置元素的 marginpadding。这些类名遵循一致的命名规则,支持响应式设计,可以在不同的视口尺寸上进行调整。

1. 基本概念

  • 属性:指定是 margin 还是 padding,分别用 mp 表示。
  • 方向:指定属性的应用方向。
    • t:top(上)
    • b:bottom(下)
    • l:left(左)
    • r:right(右)
    • x:horizontal(水平,左右)
    • y:vertical(垂直,上下)
    • s:start(开始,左或右,取决于书写方向)
    • e:end(结束,右或左,取决于书写方向)
    • 无方向修饰符:适用于所有方向
  • 尺寸:设置间距的大小,范围从 05,以及 auto

2. 命名规则

类名由属性、方向和尺寸三部分组成,格式如下:

{属性}{方向}-{尺寸}

例如:

  • mt-3:设置顶部的 margin3
  • px-4:设置水平的 padding4
  • m-2:设置所有方向的 margin2
  • pt-0:设置顶部的 padding0
  • mb-auto:设置底部的 marginauto

3. 尺寸值

  • 00
  • 10.25rem(4px)
  • 20.5rem(8px)
  • 31rem(16px)
  • 41.5rem(24px)
  • 53rem(48px)
  • auto:根据上下文自动设置 margin

4. 示例

设置所有方向的间距
<!-- 设置所有方向的 margin 为 3 -->
<div class="m-3"></div><!-- 设置所有方向的 padding 为 4 -->
<div class="p-4"></div>
设置特定方向的间距
<!-- 设置顶部的 padding 为 5 -->
<div class="pt-5"></div><!-- 设置底部的 margin 为 auto -->
<div class="mb-auto"></div>
设置水平和垂直方向的间距
<!-- 设置水平(左右)的 margin 为 2 -->
<div class="mx-2"></div><!-- 设置垂直(上下)的 padding 为 1 -->
<div class="py-1"></div>
设置开始和结束方向的间距
<!-- 设置开始方向(左或右)的 margin 为 2 -->
<div class="ms-2"></div><!-- 设置结束方向(右或左)的 padding 为 4 -->
<div class="pe-4"></div>

5. 响应式间距

Bootstrap 的间距实用类支持响应式设计,你可以为不同的视口尺寸指定不同的间距值。前缀表示不同的视口尺寸:

  • sm:小型设备(≥576px)
  • md:中型设备(≥768px)
  • lg:大型设备(≥992px)
  • xl:超大型设备(≥1200px)
  • xxl:超超大型设备(≥1400px)
响应式示例
<!-- 在中型设备及以上设置左右的 margin 为 4 -->
<div class="mx-md-4"></div><!-- 在小型设备及以上设置顶部的 padding 为 3 -->
<div class="pt-sm-3"></div><!-- 在大型设备及以上设置开始方向的 margin 为 2 -->
<div class="ms-lg-2"></div><!-- 在超大型设备及以上设置结束方向的 padding 为 5 -->
<div class="pe-xl-5"></div>

总结

通过以上命名规则和示例,Bootstrap 的间距实用类可以帮助你快速且一致地管理元素之间的间距。特别是 startend 方向的引入,使得在处理不同语言的布局时更加灵活和语义化。

这篇关于Bootstrap 间距实用类的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1065122

相关文章

linux重启命令有哪些? 7个实用的Linux系统重启命令汇总

《linux重启命令有哪些?7个实用的Linux系统重启命令汇总》Linux系统提供了多种重启命令,常用的包括shutdown-r、reboot、init6等,不同命令适用于不同场景,本文将详细... 在管理和维护 linux 服务器时,完成系统更新、故障排查或日常维护后,重启系统往往是必不可少的步骤。本文

MySQL 添加索引5种方式示例详解(实用sql代码)

《MySQL添加索引5种方式示例详解(实用sql代码)》在MySQL数据库中添加索引可以帮助提高查询性能,尤其是在数据量大的表中,下面给大家分享MySQL添加索引5种方式示例详解(实用sql代码),... 在mysql数据库中添加索引可以帮助提高查询性能,尤其是在数据量大的表中。索引可以在创建表时定义,也可

JDK9到JDK21中值得掌握的29个实用特性分享

《JDK9到JDK21中值得掌握的29个实用特性分享》Java的演进节奏从JDK9开始显著加快,每半年一个新版本的发布节奏为Java带来了大量的新特性,本文整理了29个JDK9到JDK21中值得掌握的... 目录JDK 9 模块化与API增强1. 集合工厂方法:一行代码创建不可变集合2. 私有接口方法:接口

9个SpringBoot中的自带实用过滤器使用详解

《9个SpringBoot中的自带实用过滤器使用详解》在SpringBoot应用中,过滤器(Filter)是处理HTTP请求和响应的重要组件,SpringBoot自带了许多实用的过滤器,如字符编码,跨... 目录1. CharacterEncodingFilter - 字符编码过滤器功能和配置手动配置示例2

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中,并且长按图标也不会出现删除符号,下面解决这个问... 在 MACOS 上,Launchpad(也就是「启动台」)是一个便捷的 App 启动工具。但有时候,应

Python批量调整Word文档中的字体、段落间距及格式

《Python批量调整Word文档中的字体、段落间距及格式》这篇文章主要为大家详细介绍了如何使用Python的docx库来批量处理Word文档,包括设置首行缩进、字体、字号、行间距、段落对齐方式等,需... 目录关键代码一级标题设置  正文设置完整代码运行结果最近关于批处理格式的问题我查了很多资料,但是都没

Debian如何查看系统版本? 7种轻松查看Debian版本信息的实用方法

《Debian如何查看系统版本?7种轻松查看Debian版本信息的实用方法》Debian是一个广泛使用的Linux发行版,用户有时需要查看其版本信息以进行系统管理、故障排除或兼容性检查,在Debia... 作为最受欢迎的 linux 发行版之一,Debian 的版本信息在日常使用和系统维护中起着至关重要的作

什么是LED智能会议一体机?COB超微小间距LED会议一体机大势所趋

LED智能会议一体机,作为现代会议室革新的核心装备,正逐步颠覆传统会议模式的界限。它不仅仅是一台集成了高清显示、触控互动、音视频处理及远程协作等功能于一体的智能设备,更是推动会议效率与体验双重飞跃的关键力量。随着技术的不断进步,特别是COB(Chip On Board)超微小间距LED技术的引入,LED智能会议一体机正迎来前所未有的发展机遇,成为大势所趋。 COB技术通过将LED芯片直接封装在基

全倒装COB超微小间距LED显示屏的工艺技术,相比SMD小间距有何优势

全倒装COB(Chip On Board)超微小间距LED显示屏,在工艺技术上的革新,相较于传统的SMD(Surface Mount Device)小间距LED显示屏,展现出了多方面的显著优势。 首先,全倒装技术极大地提升了LED芯片的散热性能。通过将芯片直接焊接在基板上,减少了热阻,使得热量能够更快速地传导至基板并散发出去,有效避免了因高温导致的光衰和色彩偏移问题,从而保证了显示屏的长期稳定性

如何将卷积神经网络(CNN)应用于医学图像分析:从分类到分割和检测的实用指南

引言 在现代医疗领域,医学图像已经成为疾病诊断和治疗规划的重要工具。医学图像的类型繁多,包括但不限于X射线、CT(计算机断层扫描)、MRI(磁共振成像)和超声图像。这些图像提供了对身体内部结构的详细视图,有助于医生在进行准确诊断和制定个性化治疗方案时获取关键的信息。 1. 医学图像分析的挑战 医学图像分析面临诸多挑战,其中包括: 图像数据的复杂性:医学图像通常具有高维度和复杂的结构