1. 为什么全局CSS样式值得单独拎出来讲很多人学Bootstrap的路径是这样的先找个模板把按钮、表单、导航栏的类名抄一遍页面能跑起来就收工。等到哪天设计师给了一张新稿子要求“这个标题在移动端小一点、在桌面端大一点”或者“表格在窄屏下要能横向滚动”立刻就懵了——因为脑子里只有“抄过的类名”没有“全局样式”这层认知。Bootstrap的全局CSS样式说白了就是框架给你预设的一整套“默认长相”和“默认行为”。它不依赖任何JavaScript你只要把CSS文件引进去页面上所有原生HTML元素就已经被重新定义过了。标题的字体大小、段落的行高、表格的边框、表单控件的圆角、按钮的间距全都是全局样式在起作用。这一篇我聚焦在“上”半部分也就是排版、文本、表格、图片这几块最基础、也最容易被忽略的内容。为什么先讲这些因为它们是页面的骨架。你把骨架的规则摸透了后面再学栅格、组件、JavaScript插件心里就有底了——你知道每个元素从哪来、为什么长这样、想改该动哪里。适合谁看已经能引入Bootstrap、能写基本HTML但对“为什么这个元素默认是这个样子”说不清楚的开发者。看完你应该能做到不查文档凭记忆说出标题、段落、表格、图片这几类元素的默认规则和常用类名并且知道在什么场景下该覆盖、什么场景下该顺着框架走。2. 全局样式的整体设计思路拆解2.1 从“重置”到“约定”Bootstrap到底做了什么浏览器对HTML元素有一套默认样式比如h1就是比p大ul就是有缩进和小圆点。问题是不同浏览器的默认值不完全一致这就是所谓的“浏览器差异”。Bootstrap做的第一件事是通过一套统一的规则把这些差异抹平让同一个页面在不同浏览器里长得基本一样。但它不止于“抹平”。它还在默认样式之上加了一层“约定”——比如全局的font-family、font-size、line-height、color以及链接的默认颜色和悬停效果。这层约定决定了整个页面的“基调”。你可以把它理解成装修时的“硬装”墙刷什么颜色、地板铺什么材质后面你摆什么家具组件都建立在这个基调上。所以全局样式的设计逻辑是两层第一层是归一化第二层是定基调。归一化保证一致性定基调保证开箱即用的美观度。理解了这两层你就明白为什么有些样式你“没写却生效了”——那是基调在起作用。2.2 为什么用“类名驱动”而不是“元素驱动”Bootstrap的一个核心设计哲学是尽量不靠元素选择器而是靠类名来控制样式。比如它不会把table直接定义成带条纹的表格而是提供一个.table类你加上它才有基础表格样式再加.table-striped才有斑马纹。这么做的好处很直接可控性和可组合性。如果框架直接把所有table都变成条纹表格那你想做一个无边框的布局表格时就很难受得写一堆覆盖样式。而类名驱动意味着“你不加类元素就保持相对中性的状态你加了类才获得对应的外观”。这跟后来流行的原子化CSS思路是一脉相承的。代价是什么代价是HTML会变得“类名很多”。一个表格可能挂着三四个类。这是Bootstrap被吐槽最多的地方但站在框架设计者的角度这是用“HTML的啰嗦”换“CSS的可预测”。我个人是接受这个 trade-off 的因为排查样式问题时看类名比看层叠规则快得多。2.3 移动优先在全局样式里的体现Bootstrap从3开始全面转向移动优先。这个理念在全局样式里其实已经有影子了虽然真正的栅格断点要到栅格系统那一篇才展开。具体体现在基础样式默认按小屏来定大屏的调整通过媒体查询往上加。举个例子全局的font-size基准值定在16px也就是1rem行高定在1.5。这个组合在小屏上阅读是舒服的。到了大屏它不会自动变大而是靠你手动用排版类去调。这种“小屏为基准、大屏做增强”的思路贯穿了整个框架。注意很多人误以为移动优先就是“先写手机样式再写桌面样式”其实更准确的理解是“默认样式服务于最小可用屏幕增强样式通过媒体查询叠加”。这个思维转变很重要后面写自定义样式时也建议沿用。3. 排版与文本最基础也最容易翻车的部分3.1 标题的默认规则与视觉层级Bootstrap对h1到h6做了统一的字号和间距定义。以默认的16px基准来算大致是这样一个梯度标签字号rem折合像素字重h12.5rem40px500h22rem32px500h31.75rem28px500h41.5rem24px500h51.25rem20px500h61rem16px500注意字重是500而不是默认的bold700。这是Bootstrap的一个审美选择——它希望标题看起来“有分量但不笨重”。如果你觉得不够粗可以自己加.fw-bold之类的工具类但默认这个500是经过调校的。这里有个非常实用的类.h1到.h6。它的作用是让一个非标题元素看起来像标题。比如你有个div需要视觉上像h3但又不想破坏文档大纲比如SEO或无障碍阅读器对标题层级的判断就可以写div classh3。这个技巧在组件开发里用得很多因为组件的标题层级应该由使用场景决定而不是由组件内部写死。还有一个细节Bootstrap给标题加了margin-top: 0和margin-bottom: 0.5rem。为什么顶部是0因为标题通常是某个区块的开头上面不该有额外间距间距应该由父容器的padding或上一个区块的margin-bottom来控制。这个设计避免了“margin折叠”带来的意外空白。3.2 段落、强调与文本工具类段落的默认规则很简单margin-bottom: 1rem行高继承全局的1.5。这个1rem的下边距是Bootstrap整个间距体系的基石之一后面你会看到很多地方都是1rem的倍数。文本层面的强调标签Bootstrap做了语义化处理mark黄色背景高亮用于标记相关文本small字号降到80%颜色变浅用于副文本strong加粗语义是“重要”em斜体语义是“强调”del删除线语义是“已删除”ins下划线语义是“已插入”u普通下划线s删除线语义上不如del正式这里我要提醒一个坑b和strong、i和em在视觉上一样但语义不同。Bootstrap对它们的样式处理是一样的但无障碍阅读器会区别对待。如果你只是想要视觉加粗用b如果是强调重要性用strong。这个区别在正经项目里是要讲究的。文本对齐方面Bootstrap提供了.text-start、.text-center、.text-end三个类。注意它用的是start/end而不是left/right这是为了适配从右到左的语言比如阿拉伯语。这个细节体现了框架的国际化考量虽然我们大多数项目用不到但知道这个设计意图有助于理解它的命名逻辑。文本颜色方面有一组语义色类.text-primary、.text-secondary、.text-success、.text-danger、.text-warning、.text-info、.text-light、.text-dark、.text-muted。这些颜色跟主题色系统挂钩改主题色时它们会跟着变。.text-muted是个特例它是灰色用于次要信息不跟随主题色。3.3 列表的处理无样式列表与内联列表Bootstrap对列表的处理很克制。ul和ol保持浏览器默认的缩进和标记但它提供了两个实用类.list-unstyled去掉列表标记和左缩进但保留margin-bottom。这个类在写导航、菜单、卡片内容列表时用得极多因为大多数UI场景不需要小圆点。.list-inline把列表项变成水平排列。配合.list-inline-item使用每个项之间会有默认的间距。这里有个实操心得.list-unstyled只影响直接子元素如果你有嵌套列表嵌套的那层还是会有标记。这是故意的因为嵌套列表通常需要视觉区分。如果你要全部去掉得给嵌套的ul也加上这个类。另外描述列表dl在Bootstrap里也有处理。dt默认加粗dd默认有左缩进。如果你要做水平排列的描述列表可以用.row配合栅格或者用.dl-horizontal注意这个类在较新版本里被移除了需要用栅格替代。这个变化说明框架在往“用栅格解决一切布局”的方向收敛。4. 表格从基础样式到响应式处理4.1 基础表格类的组合逻辑Bootstrap的表格样式是典型的“类名叠加”设计。你必须先加.table这是基础样式它做了几件事设置宽度100%、设置单元格padding、设置底部边框、设置垂直对齐为top。然后你可以叠加各种修饰类类名作用使用场景.table-striped斑马纹奇数行背景色数据行多、需要横向追踪.table-bordered四周边框和单元格边框需要明确单元格边界.table-borderless去掉所有边框简洁风格、卡片内表格.table-hover鼠标悬停行高亮可点击行、需要聚焦.table-sm减小单元格padding数据密集、空间紧张.table-dark深色背景表格深色主题区域这些类可以自由组合比如.table.table-striped.table-hover.table-bordered就是一个带斑马纹、悬停高亮、有边框的表格。组合顺序不影响效果因为它们是独立的样式规则。注意.table-striped的斑马纹是通过nth-of-type(odd)实现的作用于tbody内的tr。如果你的表格结构里tbody有多层或者用了tr以外的元素斑马纹可能会错位。这是排查表格样式问题时第一个要看的地方。4.2 表格的语义色与状态类Bootstrap给表格行和单元格提供了语义色类用来表达状态.table-primary主要通常表示“当前选中”.table-secondary次要.table-success成功表示“已完成”“通过”.table-danger危险表示“失败”“错误”.table-warning警告表示“待处理”“注意”.table-info信息表示“提示”.table-light/.table-dark浅色/深色这些类可以加在tr上也可以加在td或th上。加在tr上整行变色加在单元格上只有那个格子变色。实际项目里我通常用.table-success标记“审核通过”的行用.table-danger标记“被驳回”的行用.table-warning标记“待审核”的行。这样一眼扫过去就能看出数据状态分布。有个细节要注意语义色类会覆盖斑马纹。因为它们的优先级更高更具体的选择器。所以如果你同时用了.table-striped和行上的.table-success那一行会显示成功色而不是斑马纹。这个行为是合理的但如果你没预期到可能会觉得“斑马纹怎么少了一行”。4.3 响应式表格的实现原理表格在窄屏上最容易出问题——列多了就会撑破容器导致整个页面横向滚动。Bootstrap的解决方案是.table-responsive它的原理是给表格套一个外层容器设置overflow-x: auto让表格在容器内横向滚动而不是撑破页面。这个类有几种断点变体.table-responsive-sm、.table-responsive-md、.table-responsive-lg、.table-responsive-xl。含义是“在某个断点以下启用横向滚动以上则正常显示”。比如.table-responsive-md表示在md断点以下横向滚动md及以上正常。为什么需要断点变体因为有些表格在平板宽度下还能看到了手机才需要滚动。用断点变体可以精确控制“从哪个宽度开始滚动”避免在大屏上出现不必要的滚动条。实操中我踩过的一个坑.table-responsive必须包在表格外面不能直接加在table上。因为overflow属性对table元素的表现不一致套一层div是最稳妥的做法。另外如果表格里用了下拉菜单或tooltip横向滚动可能会把它们裁掉这时候要么改用其他交互方式要么把overflow改成visible但那样就失去响应式意义了。这是个取舍问题没有完美解。5. 图片与媒体元素的全局处理5.1 响应式图片的三种类Bootstrap对图片提供了三个核心类.img-fluid最大宽度100%高度自动。这是最常用的让图片在容器内自适应缩放不会溢出。.img-thumbnail给图片加一圈边框和一点内边距看起来像相框。适合头像、缩略图。.rounded系列圆角。.rounded是小圆角.rounded-circle是圆形.rounded-pill是胶囊形还有.rounded-0到.rounded-3的尺寸变体。.img-fluid的实现是max-width: 100%; height: auto;。注意是max-width不是width这意味着如果图片本身比容器小它不会被放大保持原始尺寸。这个设计是合理的——放大图片会模糊不如保持原样。但这里有个常见误区很多人以为加了.img-fluid图片就会“填满容器”。不会的。它只是“不超过容器”。如果你要填满得用width: 100%或者配合栅格。这个区别在写卡片封面图时特别重要。5.2 图片对齐与figure元素图片的水平对齐Bootstrap没有提供专门的类而是建议用文本对齐类或者flex工具类。比如把图片包在一个.text-center的div里图片就会居中。或者用.d-flex.justify-content-center。后者更现代也更可控。figure元素在Bootstrap里有默认样式margin-bottom: 1rem。配合figcaption使用时figcaption的样式是font-size: 80%; color: #6c757d;也就是小号灰色字。这个组合适合做“图片说明文字”的场景语义也比用div包起来更规范。5.3 媒体对象的全局基础虽然媒体对象media object在较新版本里被工具类替代了但它的思路值得说。媒体对象是“左图右文”或“左文右图”的经典布局Bootstrap早期用.media类实现现在推荐用flex工具类手写。为什么放弃.media类因为flex工具类已经足够灵活再维护一个专门的媒体对象类反而增加了API负担。这个演进说明框架在“提供现成组件”和“提供底层工具”之间逐渐偏向了后者。对使用者来说短期学习成本高了但长期灵活性大了。用flex实现媒体对象的典型写法是外层.d-flex图片加.flex-shrink-0防止被压缩文字部分加.flex-grow-1占据剩余空间中间用.me-3之类的间距类隔开。这套组合比.media类更透明你清楚知道每个类在干什么。6. 常见问题与排查技巧实录6.1 样式不生效的排查顺序遇到“我加了类但没效果”按这个顺序查类名拼写Bootstrap的类名是连字符分隔不是驼峰。.text-center不是.textCenter。这个错误新手犯得最多。CSS文件是否引入打开开发者工具看Network里CSS文件是否200。有时候路径错了但页面不报错只是样式全无。类是否加对元素.table-striped要加在table上不是tbody上。.img-fluid要加在img上不是父容器上。优先级冲突你自己的CSS如果用了ID选择器或者!important可能覆盖了Bootstrap。用开发者工具看Computed面板看哪条规则赢了。版本差异Bootstrap 4和5的类名有变化比如.text-left在5里变成了.text-start。确认你用的版本和文档版本一致。6.2 表格在窄屏下的典型问题问题现象原因解决页面整体横向滚动表格没包.table-responsive套一层div classtable-responsive表格内文字换行难看单元格padding太大或字号太大加.table-sm或调整字号斑马纹错位tbody结构不规范确保数据行都在同一个tbody内悬停高亮不生效行上有语义色类覆盖语义色优先级高于hover需调整响应式容器内下拉被裁overflow-x: auto裁剪改用overflow: visible或换交互方式6.3 图片相关的踩坑记录.img-fluid在flex容器里有时会失效因为flex item的默认min-width: auto会阻止收缩。解决办法是给图片加.min-width-0或者给flex容器加.overflow-hidden。这个坑我在做卡片列表时踩过图片死活不缩小最后发现是flex的默认行为在作祟。另一个坑是.rounded-circle要求图片是正方形否则会变成椭圆。如果你要圆形头像但原图不是正方形得先用object-fit: cover配合固定宽高或者用背景图方案。Bootstrap本身不处理这个需要自己补CSS。实操心得全局样式的问题90%都能在开发者工具的Computed面板里找到答案。养成“先看Computed再改代码”的习惯比盲目试类名快十倍。7. 我个人的使用体会全局CSS样式这部分刚学的时候觉得“不就是些默认样式吗有什么好讲的”。但做了几个项目之后才发现真正决定页面质感的恰恰是这些最基础的东西。标题的间距、段落的行高、表格的边框、图片的缩放这些细节堆在一起就是“看起来专业”和“看起来像半成品”的区别。我的建议是不要急着去学组件和插件先把这一篇里的类名挨个在页面上试一遍。建一个测试页面把所有标题、所有文本类、所有表格类、所有图片类都摆上去用开发者工具逐个看效果。这个过程花不了两小时但会让你后面写页面时心里有底——你知道每个元素从哪来想改该动哪里。还有一点Bootstrap的全局样式是“可以被覆盖的”。它没有用!important锁死任何东西除了极少数工具类。这意味着你可以在它基础上做自己的设计系统。但覆盖之前先确认你真的需要覆盖——很多时候只是你没找到对应的类而已。