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

【前端】Bootstrap:栅格系统 (Grid System)

Bootstrap的栅格系统是该框架的核心部分之一,能够让开发者轻松创建响应式网页布局,适配各种屏幕尺寸和设备。栅格系统通过将页面划分为12列的布局结构,开发者可以根据内容的重要性和设计需求灵活控制元素的宽度和排列。

在这篇文章中,我们将深入剖析Bootstrap的栅格系统,包括其工作原理、具体用法、响应式设计技巧以及进阶技巧。

栅格系统的基本原理

Bootstrap的栅格系统基于CSS的flexbox布局,并且采用了12列的布局模型。也就是说,一个网页的容器可以被分成12等份,用户可以通过指定列的宽度来控制布局。

栅格系统的结构

栅格系统的基本组成部分包括以下三个主要元素:

  • Container:用于包裹整个栅格系统的容器,可以分为固定宽度或流体布局(自适应屏幕宽度)。
  • Row:栅格行,用于包含列元素,并确保列在水平排列时正确对齐。
  • Col:栅格列,负责实际内容的显示,每一行最多可以包含12列。

基本结构示例

以下是一个最基础的栅格结构,它包含一个容器(container),一行(row),以及三列(col):

<div class="container"><div class="row"><div class="col">列 1</div><div class="col">列 2</div><div class="col">列 3</div></div>
</div>
  • Container:确保内容与页面边缘有合适的间距。
  • Row:创建一行栅格,并确保列元素在一行内对齐。
  • Col:每个col类代表一个列,占据同等宽度(自动分配)。

在上述例子中,三列在一行内均分12列的空间,因此每列宽度为4列

容器(Container)的类型

Bootstrap提供了三种类型的容器,用于控制页面内容的宽度和布局:

固定宽度容器

固定宽度容器有固定的最大宽度,通常用于桌面屏幕。这种容器会在屏幕宽度足够大时保持一定的页面边距。

<div class="container"><!-- 内容 -->
</div>

流体容器

流体容器(container-fluid)始终占满整个屏幕的宽度,不论设备的屏幕大小如何,适用于需要全屏宽度的布局。

<div class="container-fluid"><!-- 内容 -->
</div>

响应式容器

响应式容器(container-{breakpoint})根据不同屏幕的断点调整容器宽度。例如container-sm在小屏幕时充满屏幕,而在大屏幕时有固定宽度。

<div class="container-md"><!-- 内容 -->
</div>

行与列(Row & Col)

栅格系统的关键在于如何组织行和列。每一个row容器中的列必须被放置在一个.row中,以确保它们在同一水平线排列。

行(Row)

row是用来包裹列的,它确保列在水平方向正确排列,并处理列的间距问题。以下是一个带有两列的基础布局:

<div class="container"><div class="row"><div class="col">列 1</div><div class="col">列 2</div></div>
</div>

列(Col)

col定义了栅格系统中的列布局。每行最多可以容纳12列,超出的列会自动换行。

<div class="row"><div class="col-4">列 1</div><div class="col-4">列 2</div><div class="col-4">列 3</div>
</div>
  • 在上述例子中,每个列使用col-4,即占用4个栅格单元。由于一行总共有12个栅格单位,3个col-4刚好填满整个行。

响应式断点(Responsive Breakpoints)

响应式设计是现代网页设计的核心,Bootstrap通过一系列断点来控制不同设备下的布局显示方式。

Bootstrap的断点

Bootstrap内置了多个响应式断点,用于控制在不同屏幕尺寸下的布局。这些断点根据屏幕的宽度分为:

  • xs(超小屏幕):<576px
  • sm(小屏幕):≥576px
  • md(中屏幕):≥768px
  • lg(大屏幕):≥992px
  • xl(超大屏幕):≥1200px
  • xxl(超超大屏幕):≥1400px

响应式列

可以根据不同的断点,为每个屏幕尺寸设置不同的列宽。例如,在桌面上三列显示为并排的,而在手机上它们会堆叠在一起:

<div class="row"><div class="col-sm-6 col-md-4">列 1</div><div class="col-sm-6 col-md-4">列 2</div><div class="col-sm-12 col-md-4">列 3</div>
</div>
  • col-sm-6:在小屏幕时每行显示2列。
  • col-md-4:在中等屏幕时每行显示3列。
  • col-sm-12:在小屏幕时第3列占据整行。

这样,你可以根据设备大小动态调整页面布局,保证用户在手机、平板和桌面设备上都有良好的体验。

栅格系统中的对齐与排序

Bootstrap栅格系统允许你对列进行对齐和排序,灵活控制元素的展示方式。

垂直对齐

你可以使用align-items-*类对齐一行内所有列的内容:

<div class="row align-items-center"><div class="col">上对齐</div><div class="col">垂直居中</div>
</div>

常见对齐选项:

  • align-items-start:顶部对齐
  • align-items-center:垂直居中
  • align-items-end:底部对齐

水平对齐

可以通过justify-content-*类控制列在水平方向的对齐方式:

<div class="row justify-content-center"><div class="col-4">居中对齐的列</div>
</div>

常见的水平对齐选项:

  • justify-content-start:左对齐
  • justify-content-center:居中对齐
  • justify-content-end:右对齐
  • justify-content-between:两端对齐

列排序

有时你可能需要在HTML中按照特定顺序编写列,但希望在不同屏幕尺寸下重新排列它们。可以通过order-*类实现这一功能:

<div class="row"><div class="col order-3">第三列</div><div class="col order-1">第一列</div><div class="col order-2">第二列</div>
</div>

在此例中,尽管HTML中第三个div位于第一位,但在屏幕上它将显示为第三列。

栅格系统中的嵌套

你可以将栅格系统嵌套使用,以实现更复杂的布局结构。嵌套栅格是指在一个col列内部再创建一个row,然后在该行中使用多个col列。

嵌套栅格示例

<div class="container"><div class="row"><div class="col-8">主列<div class="row"><div class="col">嵌套列 1</div><div class="col">嵌套列 2</div></div></div><div class="col-4">侧边栏</div></div>
</div>

这个例子中,col-8内的行和列表示一个嵌套栅格结构,用于在主列内部再创建两列。

栅格系统的高级用法

等高列

在某些设计中,你希望多列具有相同的高度。由于Bootstrap栅格系统基于flexbox,你可以轻松实现等高布局:

<div class="row align-items-stretch"><div class="col">等高列 1</div><div class="col">等高列 2</div>
</div>

列偏移

使用offset-*类,你可以让列向右移动指定的列数,从而控制内容的布局。例如,如果你想让列从中间开始:

<div class="row"><div class="col-md-4 offset-md-4">偏移后的列</div>
</div>

在这个例子中,offset-md-4让列向右偏移4个栅格单元,从而使列居中显示。

栅格系统的常见问题

  • 为什么12列?

    12列的设计是因为12可以被多个数字整除(1、2、3、4、6),这使得它在布局上更具灵活性。

  • 列是否必须总和为12?

    不,列的总和不一定必须为12。如果总和超过12,剩余的列将换行。如果不足12,剩余的空间会保持空白。

结语

Bootstrap的栅格系统不仅功能强大,而且简单易用。通过12列布局模型、响应式断点以及对齐与排序的灵活配置,你可以轻松创建适应各种屏幕尺寸的响应式网页布局。

继续实践并探索栅格系统的更多可能性,它将为你的网页开发提供坚实的基础。

相关文章:

【前端】Bootstrap:栅格系统 (Grid System)

Bootstrap的栅格系统是该框架的核心部分之一&#xff0c;能够让开发者轻松创建响应式网页布局&#xff0c;适配各种屏幕尺寸和设备。栅格系统通过将页面划分为12列的布局结构&#xff0c;开发者可以根据内容的重要性和设计需求灵活控制元素的宽度和排列。 在这篇文章中&#x…...

一文读懂,SSL证书怎么验签安装使用?

SSL证书目前已经有越来越多的企业网站开始使用&#xff0c;安装SSL证书后&#xff0c;原有的http协议将会变成安全性更好的https加密协议&#xff0c;这对保护用户的信息安全&#xff0c;保障企业及用户的利益起着重要作用。 一张SSL证书的获取&#xff0c;需要经历不少环节&a…...

Mysql(八) --- 视图

文章目录 前言1.什么是视图&#xff1f;2.创建视图3. 使用视图4. 修改数据4.1.注意事项 5. 删除视图6.视图的优点 前言 前面我们学习了索引&#xff0c;这次我们来学习视图 1.什么是视图&#xff1f; 视图是一个虚拟的表&#xff0c;它是基于一个或多个基本表或其他视图的查询…...

SQL注入原理、类型、危害与防御

SQL注入的原理概念 SQL注入是一种常见的网络攻击技术&#xff0c;攻击者通过在Web应用程序的输入字段中注入恶意构造的SQL代码&#xff0c;以欺骗后端数据库执行非预期的SQL命令。这种攻击可以导致数据泄露、权限提升、数据篡改甚至系统瘫痪。SQL注入可以分为多种类型&#xf…...

第2讲 数据库系统的结构抽象与演变

基本内容 数据库系统的标准结构?数据模型?数据库系统的演变与发展?重难点 一组概念的区分:三级模式两层映像,物理独立性和逻辑独立性一组概念的区分:数据→模式→数据模型几种数据模型的差异:网状/层次模型→关系模型→数据模型数据库系统的标准结构 (1)数据库系统的分…...

Git创建开发分支命名规则

git checkout -b feature/branchname 和 git checkout -b branchname 这两条命令的主要区别在于新分支的命名。 主要区别 分支命名&#xff1a; git checkout -b feature/branchname&#xff1a;新分支的名字是 feature/branchname&#xff0c;表示该分支属于一个特性开发&…...

【纯前端excel导出】vue2纯前端导出excel,使用xlsx插件,修改样式、合并单元格

一、使用第三方插件 1、安装 npm install xlsx-js-style 2、引入 import xlsx from xlsx-js-style xlsx插件是基础的导出&#xff0c;不可以修改样式&#xff0c;直接xlsx-style插件式修改样式的&#xff0c;所以这里直接用二者合体插件即可 二、页面使用 1、数据源 [{"…...

如何在极速浏览器中实现谷歌浏览器的扩展功能

在当今数字化时代&#xff0c;浏览器扩展功能极大地增强了我们的在线体验。尤其是谷歌浏览器&#xff0c;以其丰富的扩展生态而闻名。但是&#xff0c;如果你想在极速浏览器中使用这些谷歌浏览器的扩展功能&#xff0c;该怎么办呢&#xff1f;本文将为你详细解析如何实现这一目…...

Web安全 - 跨站点请求伪造CSRF(Cross Site Request Forgery)

文章目录 OWASP 2023 TOP 10CSRF 导图CSRF的基本概念CSRF的工作原理常见CSRF攻击模式CSRF防御策略补充建议应用场景实战防御策略选择1. CSRF Token&#xff08;首选&#xff09;2. SameSite Cookie属性3. 验证Referer和Origin4. 多因素认证 实现方案CSRF Token实现SameSite Coo…...

C++游戏开发完整学习路径

C游戏开发完整学习路径 引言 随着游戏行业的迅速发展&#xff0c;C作为主要的游戏开发语言&#xff0c;因其高效性和灵活性&#xff0c;依然受到广泛欢迎。C不仅在大型游戏开发中被广泛使用&#xff0c;而且在游戏引擎的构建、性能优化和复杂算法的实现中也扮演着关键角色。本…...

vue3之 shallowRef、markRaw

shallowRef 用于创建一个浅层响应式引用&#xff0c;只对顶层属性进行响应式处理。 markRaw 用于标记一个对象&#xff0c;使其完全跳过 Vue 的响应式系统。 这两者都可以用于优化性能&#xff0c;避免不必要的响应式开销&#xff0c;特别是在处理大型对象或第三方库对象时。 …...

影刀RPA实战:操作Mysql数据库

1.摘要 影刀RPA&#xff08;Robotic Process Automation&#xff09;是一种软件自动化工具&#xff0c;它可以模拟人类用户执行各种重复性任务&#xff0c;其中包括对数据库的操作。 我们可以使用软件自动化指令&#xff0c;通过获取数据库窗口对象来操作数据库&#xff0c;也…...

【c++】c++11多线程开发

2 C多线程 本文是参考爱编程的大丙c多线程部分内容&#xff0c;按照自己的理解对其进行整理的一篇学习笔记&#xff0c;具体一些APi的详细说明请参考大丙老师教程。 代码性能的问题主要包括两部分的内容&#xff0c;一个是前面提到资源的获取和释放&#xff0c;另外一个就是多…...

PW37R_V1 产品规格书

概述 PW37R_V1是一款采用3.7英寸黑白红三色电子纸显示的电子标签&#xff0c;采用一种先进的无线自动更新系统&#xff0c;实现无线传输。 通过http&#xff0c;mqtt协议更新数据和控制该款电子标签的显示等操作&#xff0c;显示内容可自定义。内置电池供电&#xff0c;可Typ…...

android11 usb摄像头添加多分辨率支持

部分借鉴于&#xff1a;https://blog.csdn.net/weixin_45639314/article/details/142210634 目录 一、需求介绍 二、UVC介绍 三、解析 四、补丁修改 1、预览的限制主要存在于hal层和framework层 2、添加所需要的分辨率&#xff1a; 3、hal层修改 4、frameworks 5、备…...

【开源免费】基于SpringBoot+Vue.JS房屋租赁系统(JAVA毕业设计)

本文项目编号 T 020 &#xff0c;文末自助获取源码 \color{red}{T020&#xff0c;文末自助获取源码} T020&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…...

JavaScript全面指南(二)

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;Javascript篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来JavaScript篇专栏内容:JavaScript全面指南(二) 目录 21、说明如何使用JavaScript提交表单&#xff1f; 2…...

Nginx:Linux配置Nginx

目录 一、环境安装1.1 GCC编译器1.2 PCRE1.3 Zlib1.4 OpenSSL1.5 快速下载 二、Nginx源码简单安装2.1 下载安装包2.2 解压2.3 进入资源文件中2.4 编译、安装 三、Yum安装四、Nginx源码复杂安装4.1 参数介绍4.2 参数配置 五、卸载Nginx5.1 关闭Nginx进程5.2 将安装的Nginx删除5.…...

WebRTC音频 04 - 关键类

WebRTC音频01 - 设备管理 WebRTC音频 02 - Windows平台设备管理 WebRTC音频 03 - 实时通信框架 WebRTC音频 04 - 关键类(本文) 一、前言&#xff1a; 在WebRTC音频代码阅读过程中&#xff0c;我们发现有很多关键的类比较抽象&#xff0c;搞不清楚会导致代码阅读一脸懵逼。比如…...

Elasticsearch:Redact(编辑) processor

Redact 处理器使用 Grok 规则引擎来隐藏输入文档中与给定 Grok 模式匹配的文本。该处理器可用于隐藏个人身份信息 (Personal Identifying Information - PII)&#xff0c;方法是将其配置为检测已知模式&#xff0c;例如电子邮件或 IP 地址。与 Grok 模式匹配的文本将被替换为可…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

2025.6.9总结(利与弊)

凡事都有两面性。在大厂上班也不例外。今天找开发定位问题&#xff0c;从一个接口人不断溯源到另一个 接口人。有时候&#xff0c;不知道是谁的责任填。将工作内容分的很细&#xff0c;每个人负责其中的一小块。我清楚的意识到&#xff0c;自己就是个可以随时替换的螺丝钉&…...