当前位置: 首页 > news >正文

Bootstrap 5 容器与网格系统详解

一、容器 - 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的容器和网格系统,这些是构建响应式网站的基础。掌握这些技巧将使您能够创建适应各种屏幕尺寸的现代网站布局。

http://www.xdnf.cn/news/529255.html

相关文章:

  • 项目删除了,为什么vscode中的git还是存在未提交记录,应该怎么删除掉
  • vue3个生命周期解析,及setup
  • 遨游科普:三防平板是什么?有什么作用?
  • 线光谱共焦传感器:复杂材质检测
  • MCU 温度采样理论(-ADC Temperature sensor)
  • 用户账号及权限管理:企业安全的基石与艺术
  • python训练营day29
  • CAN总线采样点不一致的危害
  • 26、DAPO论文笔记(解耦剪辑与动态采样策略优化,GRPO的改进)
  • 计算机网络(2)——应用层(上)
  • Spring_Boot(一)Hello spring boot!
  • 2025年- H32-Lc140 --21. 合并两个有序链表--Java版
  • BM25(Best Matching 25)介绍与使用
  • BC27 计算球体的体积
  • hexo博客搭建使用
  • 数据库-oracle-包-视图传参
  • upload靶场1-5关
  • 【MYSQL】基本查询,表的增删查改
  • 云原生攻防1(基础介绍)
  • Unity预制体变体(Prefab Variants)、接口(Interface)、抽象类(Abstract Class)、枚举(Enumeration)
  • 如何快速更换电脑浏览器ip:教程与注意事项
  • Seata源码—6.Seata AT模式的数据源代理二
  • leetcode 74. Search a 2D Matrix
  • SQL注入——Sqlmap工具使用
  • 实景VR展厅制作流程与众趣科技实景VR展厅应用
  • Assistants API
  • upload-labs靶场通关详解:第10关
  • 项目QT+ffmpeg+rtsp(三)——延迟巨低的项目+双屏显示
  • FPGA 串口_波特率计算
  • 使用Python和FastAPI构建网站爬虫:Oncolo医疗文章抓取实战