php做网站架构图湖北网站设计
一、容器 - Bootstrap的基础构建块
Bootstrap需要容器元素来包裹网站内容，提供两种主要选择：
.container- 固定宽度并支持响应式布局.container-fluid- 100%宽度，占据全部视口
1. 固定宽度容器
.container创建固定宽度的响应式页面，其宽度会根据屏幕尺寸自动调整：
<div class="container"><!-- 内容放这里 -->
</div>
2. 全屏宽度容器
.container-fluid创建始终占据100%屏幕宽度的容器：
<div class="container-fluid"><!-- 内容放这里 -->
</div>
3. 响应式容器
Bootstrap 5提供多种响应式容器类型：
.container-sm(≥576px).container-md(≥768px).container-lg(≥992px).container-xl(≥1200px).container-xxl(≥1400px)
二、网格系统 - 12列响应式布局
Bootstrap提供强大的网格系统，将页面划分为最多12列。
1. 网格类
.col-- 适用所有设备.col-sm-- 平板 (≥576px).col-md-- 桌面显示器 (≥768px).col-lg-- 大桌面显示器 (≥992px).col-xl-- 特大桌面显示器 (≥1200px).col-xxl-- 超大桌面显示器 (≥1400px)
2. 交叉轴对齐
<div class="row align-items-start"><div class="col-3">列1</div><div class="col-5">列2</div><div class="col-4">列3</div>
</div>
常用对齐类：
align-items-start- 顶部对齐align-items-center- 中间对齐align-items-end- 底部对齐
3. 主轴对齐
<div class="row justify-content-start"><div class="col-4">列1</div><div class="col-4">列2</div>
</div>
常用对齐类：
justify-content-start- 左对齐justify-content-center- 居中对齐justify-content-end- 右对齐justify-content-between- 两端对齐justify-content-around- 均匀分布
4. 高级布局技巧
列自动换行
当一行中的列宽总和超过12时，额外的列会自动换行：
<div class="row"><div class="col-9">占9格</div><div class="col-4">占4格，自动换行</div><div class="col-6">新行中占6格</div>
</div>
强制分栏
使用w-100实现强制换行：
<div class="row"><div class="col-6">上行列1</div><div class="col-6">上行列2</div><div class="w-100"></div><div class="col-6">下行列1</div><div class="col-6">下行列2</div>
</div>
列偏移
使用.offset-*类控制列的位置：
<div class="row"><div class="col-md-4">第一列</div><div class="col-md-4 offset-md-4">偏移4格的列</div>
</div>
列排序
使用.order-*自定义列的显示顺序：
<div class="row"><div class="col">正常顺序</div><div class="col order-5">显示最后</div><div class="col order-1">显示最前</div>
</div>
三、文本与标题样式
1. Display标题类
<h1 class="display-1">超大标题</h1>
<h1 class="display-2">大标题</h1>
<!-- 从display-1到display-6 -->
2. 段落样式
<p>普通段落</p>
<p class="lead">引人注目的段落</p>
3. 文本对齐
<p class="text-start">左对齐文本</p>
<p class="text-center">居中文本</p>
<p class="text-end">右对齐文本</p>
4. 响应式文本对齐
<p class="text-md-center">在中等屏幕及以上居中显示</p>
5. 文本转换
<p class="text-lowercase">全部小写</p>
<p class="text-uppercase">全部大写</p>
<p class="text-capitalize">首字母大写</p>
以上内容全面介绍了Bootstrap 5的容器和网格系统，这些是构建响应式网站的基础。掌握这些技巧将使您能够创建适应各种屏幕尺寸的现代网站布局。