Bootstrap基础布局组件包括容器、栅格系统、间距工具类和响应式工具。容器（.container和.container-fluid）用于包裹内容并实现居中或全宽布局。栅格系统基于12列flex布局，通过.row和.col类创建响应式行和列，支持多断点适配。间距工具类如.mt-3、.ps-2等提供快捷的外边距和内边距设置。响应式工具如.d-none.d-sm-block可控制元素在不同屏幕尺寸下的显示状态。合理组合这些组件能快速构建适配多端的页面结构。
Bootstrap 是一个流行的前端框架，提供了简洁的 CSS 和预定义组件，帮助开发者快速构建响应式网页。掌握其基础布局组件是使用 Bootstrap 的第一步。以下是常用基础布局组件的使用方法。
容器（Container）
容器用于包裹页面内容并提供合适的宽度和居中对齐。Bootstrap 提供两种容器：
- .container：固定宽度容器，根据屏幕大小自动适配最大宽度。
- .container-fluid：全宽容器，占据整个视口宽度。
页面内容
栅格系统（Grid System）
Bootstrap 使用基于 flexbox 的 12 列栅格系统，实现响应式布局。通过行（row）和列（col）组合来排布内容。
立即学习“前端免费学习笔记（深入）”；
eshop网上书店源码
下载
适合初学的标准三层架构，采用ajax，页面布局div+css符合w3c，用vs自带的sqlserver，免配置sqlserver，使用方便，里面共有5个项目，点击最外层的.sln直接可运行。网站采用asp.net 用户角色配置（membership，UserRoles），用户角色、权限可在asp.net配置里修改，注册，登陆均采用asp.net登陆控件，网站根据用户角色自定义sitemap，基本上
- 使用 .row 创建水平行。
- 在行内使用 .col 或带尺寸前缀的类（如 .col-md-6）定义列宽。
- 支持响应式断点：xs（默认）、sm、md、lg、xl、xxl。
主内容区
侧边栏
间距工具类（Spacing Utilities）
Bootstrap 提供 margin 和 padding 的快捷类，格式为 {property}{sides}-{size}。
- 属性：m（margin）、p（padding）。
- 方向：t（上）、b（下）、l（左）、r（右）、x（左右）、y（上下）、blank（四个方向）。
- 尺寸：0 到 5，对应不同间距层级，例如 .mt-3 表示上方中等间距。
下方大间距
上和左添加内边距
响应式工具（Responsive Utilities）
可以控制元素在不同设备上的显示状态，比如隐藏或显示某个元素。
- 使用 .d-none 隐藏元素。
- 结合断点类如 .d-md-block 实现条件显示（在中屏及以上显示）。
- 可用于优化移动端体验，隐藏非关键内容。
仅在小屏及以上显示
基本上就这些。合理使用容器、栅格、间距和响应式工具，就能快速搭建出结构清晰、适配多端的页面布局。不复杂但容易忽略细节，建议结合官方文档查看类名变化。
