零基础学Bootstrap5布局：响应式网格实战指南

Bootstrap5是流行的前端框架，核心功能是响应式网格系统，可适配手机、平板、电脑等设备。安装只需通过CDN引入CSS和JS文件。其网格系统基于“容器→行→列”三层结构：容器（container）居中并适配屏幕宽度，行（row）处理水平布局，列（col）划分宽度，将页面分为12列。 列的类名格式为`col-<断点>-<占比>`，断点包括xs（<576px）、sm（≥576px）等5种，占比为12列中的份数（如col-md-4表示中等屏幕占4列）。实战中可实现不同设备下的布局变化，如手机1列、平板2列、电脑3列。此外，Bootstrap提供文本居中、背景色、边距等辅助类，快速美化页面。核心是12列布局+断点适配，通过类名即可实现响应式，无需重复写CSS，适合零基础快速构建网页。