企业官网建设流程全解析

天津网站制作价格,郴州网站制作公司哪家好,有哪些做特卖的网站有哪些,有的网站显示正在建设中本文总结了Bootstrap5.3.8的核心类名和变量系统。主要内容包括#xff1a;布局类#xff1a;容器(.container/.container-fluid)、栅格系统(.row/.col)和间距工具(.m/p-*)样式类#xff1a;背景(.bg-)、文本(.text-)和边框(.border-*)等通用样式响应式设计#xff1a;基于断…本文总结了Bootstrap5.3.8的核心类名和变量系统。主要内容包括布局类容器(.container/.container-fluid)、栅格系统(.row/.col)和间距工具(.m/p-*)样式类背景(.bg-)、文本(.text-)和边框(.border-*)等通用样式响应式设计基于断点(xs-xxl)的类名模式(.col-md-6)组件类按钮(.btn)、卡片(.card)等常用组件SCSS变量颜色($primary)、间距($spacer)等可定制变量类名遵循[属性]-[方向]-[大小]-[断点]的命名规律采用移动优先设计原则。通过组合这些类名和变量可快速构建响应式界面。Bootstrap 5.3.8 常用类名和变量总结 布局与容器类别类名作用/示例容器.container响应式固定宽度容器容器.container-fluid全宽容器断点容器.container-{breakpoint}特定断点以上全宽如.container-lg栅格行.row水平排列列的容器栅格列.col自动宽度列栅格列.col-{breakpoint}-{number}响应式列如.col-md-6间距工具.{m|p}{t|b|s|e|x|y}-{size}边距/填充如.mt-3,.px-4 通用样式类类别类名作用/示例背景色.bg-{color}如.bg-primary,.bg-light文本色.text-{color}如.text-success,.text-muted边框.border,.border-{side}如.border-top,.border-end边框色.border-{color}如.border-warning圆角.rounded,.rounded-{size}如.rounded-3,.rounded-circle显示.d-{breakpoint}-{value}如.d-md-flex,.d-none定位.position-{type}如.position-relative,.position-fixed 文本与排版类别类名作用/示例标题.h{1-6}如.h3(类标题样式)字体大小.fs-{1-6}1最大6最小字体粗细.fw-{weight}如.fw-bold,.fw-light对齐.text-{breakpoint}-{align}如.text-md-center文本装饰.text-decoration-{type}如.text-decoration-none换行.text-wrap,.text-nowrap控制文本换行 响应式断点变量名值说明$grid-breakpointsxs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px断点映射$container-max-widthssm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1320px容器最大宽度$enable-grid-classestrue是否生成栅格类$enable-rfstrue是否启用响应式字体 组件类组件常用类名说明按钮.btn,.btn-{variant}如.btn-primary,.btn-outline-success按钮组.btn-group,.btn-toolbar按钮容器卡片.card,.card-body,.card-title卡片组件表单.form-control,.form-label,.form-select表单元素导航.nav,.nav-item,.nav-link导航组件导航栏.navbar,.navbar-brand,.navbar-nav导航栏组件弹窗.modal,.modal-dialog,.modal-content模态框下拉菜单.dropdown,.dropdown-menu,.dropdown-item下拉菜单 颜色变量 (SCSS)变量类型变量名默认值/示例主题色$primary,$secondary#0d6efd,#6c757d状态色$success,$danger#198754,#dc3545中性色$light,$dark#f8f9fa,#212529链接色$link-color$primary文本色$body-color#212529背景色$body-bg#fff 间距与尺寸变量/类值/示例说明间距尺度$spacer: 1rem基础间距单位间距乘数$spacers: (0: 0, 1: $spacer * .25, ... 5: $spacer * 3)间距比例尺寸工具w-{size},h-{size}如.w-50,.h-100视口尺寸.vw-100,.vh-100视口百分比⚡ 实用工具类类别类名作用浮动.float-{breakpoint}-{direction}如.float-md-start清除浮动.clearfix清除浮动可见性.visible,.invisible控制可见性溢出.overflow-{type}如.overflow-auto阴影.shadow,.shadow-{size}如.shadow-lg交互.user-select-all,.pe-none用户交互控制 Flexbox 布局类别类名作用/示例Flex 容器.d-flex,.d-inline-flex创建flex容器方向.flex-{breakpoint}-{direction}如.flex-md-row对齐.justify-content-{align}如.justify-content-between对齐.align-items-{align}如.align-items-center换行.flex-{breakpoint}-{wrap}如.flex-wrap排序.order-{breakpoint}-{number}如.order-md-1 使用提示响应式类命名模式:.{属性}-{断点}-{值}(断点可选)变量覆盖: 在自定义SCSS文件中修改变量后重新编译实用类组合: 多个工具类可以组合使用增强效果断点逻辑: Bootstrap使用移动优先的min-width逻辑此表格总结了Bootstrap 5.3.8中最常用的类和变量适合快速查阅和日常开发使用。Bootstrap 5.3.8 间距类名详细说明 间距工具类 (Spacing Utilities)基本语法{property}{sides}-{size}或{property}{sides}-{breakpoint}-{size}组成部分解析部分可选值含义示例propertym marginp padding设置边距或内边距m 外边距p 内边距sidest topb bottoms start(left)e end(right)x left righty top bottom空白 全部四边指定应用方向my 上下外边距px 左右内边距size0 0rem1 0.25rem2 0.5rem3 1rem4 1.5rem5 3remauto auto间距大小3 1remauto 自动breakpointsm,md,lg,xl,xxl响应式断点md 中屏及以上 常用间距类名示例外边距 (Margin) 类类名等效CSS说明常用场景.m-0margin: 0移除所有外边距重置默认边距.m-3margin: 1rem四边外边距1rem元素整体间距.my-3margin-top: 1rem; margin-bottom: 1rem上下外边距1rem垂直间距控制.mx-3margin-left: 1rem; margin-right: 1rem左右外边距1rem水平间距控制.mt-3margin-top: 1rem上外边距1rem元素顶部间距.mb-3margin-bottom: 1rem下外边距1rem元素底部间距.ms-3margin-left: 1rem左外边距1remLTR布局左侧间距.me-3margin-right: 1rem右外边距1remLTR布局右侧间距.m-automargin: auto自动外边距水平居中内边距 (Padding) 类类名等效CSS说明常用场景.p-0padding: 0移除所有内边距重置默认内边距.p-3padding: 1rem四边内边距1rem整体内边距.py-3padding-top: 1rem; padding-bottom: 1rem上下内边距1rem垂直内边距.px-3padding-left: 1rem; padding-right: 1rem左右内边距1rem水平内边距.pt-3padding-top: 1rem上内边距1rem顶部内边距.pb-3padding-bottom: 1rem下内边距1rem底部内边距 响应式间距示例类名作用响应式行为.my-3所有屏幕上下外边距1rem始终应用.my-md-3中屏及以上上下外边距1rem仅md及以上应用.my-2 my-md-3小屏上下外边距0.5rem中屏1rem不同断点不同值.mx-auto水平自动外边距水平居中.mx-lg-auto大屏及以上水平自动外边距大屏及以上水平居中my-3详细解析实际效果/* .my-3 的等效CSS */ .element { margin-top: 1rem; /* 16px (基于根元素字体大小) */ margin-bottom: 1rem; /* 16px */ }常见使用场景场景示例代码说明卡片间距div classcard my-3卡片之间的垂直间距表单元素间距div classform-group my-3表单组之间的间距按钮组间距div classbtn-group my-3按钮组与其他元素的间距段落间距p classmy-3文本/p段落之间的间距列表项间距li classmy-3项目/li列表项目之间的间距与其他类的组合!-- 组合使用示例 -- div classcard p-3 my-3 shadow-sm !-- 具有内边距、外边距和阴影的卡片 -- /div !-- 响应式组合 -- div classmy-2 my-md-3 my-lg-4 !-- 不同断点不同间距 -- /div !-- 与其他工具类组合 -- div classbg-light p-4 my-3 rounded border !-- 带背景、内边距、外边距、圆角和边框 -- /div 尺寸对应表 (基于默认设置)尺寸类rem值px值 (默认16px)视觉大小-00rem0px无间距-10.25rem4px微小间距-20.5rem8px小间距-31rem16px中等间距默认常用-41.5rem24px大间距-53rem48px超大间距 实用技巧my-3vsmt-3 mb-3.my-3.mt-3 .mb-3(更简洁)两者效果相同但.my-3代码更少负边距类Bootstrap 5也支持负边距.mt-n3,.mx-n4用于重叠元素等特殊布局自动边距应用!-- 左侧按钮右侧按钮 -- div classd-flex button classbtn btn-primary左/button button classbtn btn-secondary ms-auto右/button /div间距与Flexbox结合div classd-flex justify-content-between align-items-center my-3 div标题/div div操作按钮/div /div响应式覆盖原则!-- 移动端小间距桌面端大间距 -- div classmy-2 my-md-4 内容 /divBootstrap 类名设计规律总结 总体命名模式基础模式.{属性}-{方向}-{大小}-{断点}顺序固定属性 → 方向 → 大小 → 断点可选部分可选值是否必需示例属性m/p/text/bg/border等✅ 必需m(边距)方向t/b/s/e/x/y❌ 可选y(上下)大小0-5/primary/secondary等❌ 可选3(1rem)断点sm/md/lg/xl/xxl❌ 可选md(中屏) 属性前缀速查表前缀含义类别示例mMargin (外边距)布局.m-3,.mx-autopPadding (内边距)布局.p-4,.py-2dDisplay (显示)布局.d-flex,.d-nonepositionPosition (定位)布局.position-relativew/hWidth/Height (尺寸)布局.w-50,.h-100top/bottom/start/end定位方向布局.top-0,.start-50translate-middle居中变换布局.translate-middleborderBorder (边框)样式.border,.border-toproundedRounded (圆角)样式.rounded,.rounded-3textText (文本)排版.text-center,.text-primaryfsFont Size (字号)排版.fs-3,.fs-6fwFont Weight (字重)排版.fw-bold,.fw-lightfstFont Style (字体样式)排版.fst-italiclhLine Height (行高)排版.lh-1,.lh-basebgBackground (背景)样式.bg-primary,.bg-lightshadowShadow (阴影)样式.shadow,.shadow-smopacityOpacity (透明度)样式.opacity-50overflowOverflow (溢出)布局.overflow-autogapGap (间距)Flex/Grid.gap-2,.gap-3 方向后缀规律后缀含义适用属性示例ttop (上)m/p/border/text.mt-3,.pt-2,.border-topbbottom (下)m/p/border.mb-4,.pb-3,.border-bottomsstart (起始方向)m/p/border/text.ms-2(LTR左)eend (结束方向)m/p/border/text.me-2(LTR右)x水平方向 (左右)m/p/border.mx-auto,.px-3y垂直方向 (上下)m/p.my-3,.py-4(空)所有方向所有.m-2,.p-3记忆口诀t上b下s始e终x横y竖 数字尺寸规律间距尺寸 (m/p)数字rempx (默认)相对大小000px无间距10.25rem4px微小间距20.5rem8px小间距31rem16px基础间距41.5rem24px大间距53rem48px超大间距autoautoauto自动间距字体大小 (fs)数字相对大小近似h标签1最大≈ h12大≈ h23中≈ h34小≈ h45很小≈ h56最小≈ h6圆角大小 (rounded)后缀程度示例(空)默认圆角.rounded-0无圆角.rounded-0-1小圆角.rounded-1-2中等圆角.rounded-2-3大圆角.rounded-3-4更大圆角.rounded-4-5最大圆角.rounded-5-circle圆形.rounded-circle-pill胶囊形.rounded-pill 断点系统规律断点顺序 (从小到大)/* 断点顺序 - 记忆为 小中大特大 */ xs: 576px (默认无前缀) sm: ≥576px (小屏) md: ≥768px (中屏) lg: ≥992px (大屏) xl: ≥1200px (特大屏) xxl: ≥1400px (超大屏)断点使用规则!-- 模式.{属性}-{断点}-{其他参数} -- div classcol-md-6 !-- 中屏及以上占6列 -- div classd-none d-md-block!-- 小屏隐藏中屏显示 -- div classtext-center text-md-start !-- 小屏居中中屏左对齐 --核心原则移动优先断点参数是最小值 颜色系统规律颜色类别前缀前缀含义示例bg-背景色.bg-primarytext-文字色.text-dangerborder-边框色.border-warningbtn-按钮颜色.btn-success颜色后缀 (主题色)后缀含义使用场景primary主要主要操作、重要元素secondary次要次要操作、辅助元素success成功成功状态、完成操作danger危险删除、错误、警告warning警告提醒、注意info信息信息提示、说明light浅色浅色背景dark深色深色背景/文字body正文正文内容muted减弱次要文字 Flexbox 类名规律容器类类名模式含义示例.d-flex创建flex容器.d-flex.d-{breakpoint}-flex响应式flex容器.d-md-flex方向类类名含义记忆.flex-row水平排列默认方向.flex-row-reverse水平反向右到左.flex-column垂直排列竖排.flex-column-reverse垂直反向下到上对齐类 (双前缀规律)类别前缀方向后缀示例主轴对齐justify-content-start/end/center/between/around/evenly.justify-content-between交叉轴对齐align-items-start/end/center/baseline/stretch.align-items-center项目自身对齐align-self-start/end/center/baseline/stretch.align-self-end 记忆技巧与规律总结1.三大部分法则任何Bootstrap类名都包含以下部分[属性][-方向][-尺寸/状态][-断点] ↑ ↑ ↑ ↑ 必须 可选 可选 可选2.常见组合模式.属性-方向-尺寸→.mt-3(上边距3).属性-状态→.text-primary(主要文字色).属性-方向-断点-尺寸→.px-md-4(中屏水平内边距4)3.前缀分类记忆法布局类m,p,d,position,w,h(控制位置和大小)样式类bg,text,border,rounded,shadow(控制外观)交互类btn,nav,modal,dropdown(组件相关)4.响应式设计口诀无前缀是手机有前缀是大于。小屏sm中md大lg特大xl。5.实用记忆规则数字越大尺寸越大m/p/rounded数字越小字号越大fs断点在前属性在后.d-md-block颜色统一前缀区分.bg-.text-用相同颜色名方向缩写t/b/s/e/x/y6.快速识别练习!-- 快速分析类名 -- div classcontainer py-4 !-- 容器上下内边距4 -- div classrow g-3 !-- 行项目间距3 -- div classcol-md-6 !-- 中屏及以上占6列 -- div classcard shadow-sm !-- 卡片小阴影 -- div classcard-body !-- 卡片体 -- h5 classcard-title text-primary标题/h5 !-- 卡片标题主要色文字 --7.按使用频率记忆最常用类名优先级间距类m-*,p-*,my-*,py-*(布局基础)栅格类container,row,col-*(响应式基础)显示类d-*,d-*-*(显示控制)颜色类bg-*,text-*(样式基础)Flex类d-flex,justify-*,align-*(现代布局)记住这些规律后Bootstrap类名不再是随机字符串而是有逻辑的结构看到一个类名就能大致猜出它的作用