当前位置: 首页 > 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 模式匹配的文本将被替换为可…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径&#xff0c;但是vite中默认不可以。 如何实现&#xff1a; vite中提供了resolve.alias&#xff1a;通过别名在指向一个具体的路径 在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...

前端开发者常用网站

Can I use网站&#xff1a;一个查询网页技术兼容性的网站 一个查询网页技术兼容性的网站Can I use&#xff1a;Can I use... Support tables for HTML5, CSS3, etc (查询浏览器对HTML5的支持情况) 权威网站&#xff1a;MDN JavaScript权威网站&#xff1a;JavaScript | MDN...

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...