【前端】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列布局模型、响应式断点以及对齐与排序的灵活配置,你可以轻松创建适应各种屏幕尺寸的响应式网页布局。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/56477.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java--练习--DVD管理系统

一、详细代码 package demo2.Test;import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Scanner;public class DVD2 {//DVD管理系统//声明三个数组 用来存储 名称 状态 借出日期 借出次数String[] names new St…

学习使用linux的bash命令可以删除ps aux进程中今天之前指定运行进程的脚本

学习使用linux的bash命令可以删除ps aux进程中今天之前指定运行进程的脚本 脚本注意事项&#xff1a; 脚本 #!/bin/bash# 获取今天的日期&#xff08;格式 YYYY-MM-DD&#xff09; TODAY$(date %Y-%m-%d)# 使用 ps aux 查找所有名为 qipa250 的进程 # 并提取出 PID 和启动时间…

游戏引擎哪家强?选哪一个更有钱途

游戏引擎乃是构筑及开发视频游戏的软件架构。其供应一整套工具与库&#xff0c;以处置常见的游戏开发事务&#xff0c;诸如渲染图形、模拟物理、管控音频等等。凭借对游戏引擎的运用&#xff0c;开发人员能够将精力倾注于构建其游戏的独特之处&#xff0c;而非再度发明此类基础…

【游戏模组】极品飞车12无间风云冬季mod,冬天版本的无间风云你体验过吗

各位好&#xff0c;今天小编给大家带来一款新的高清重置魔改MOD&#xff0c;本次高清重置的游戏叫《极品飞车12无间风云》。 《极品飞车12&#xff1a;无间风云》是由Black Box游戏制作室开发的竞速类游戏&#xff0c;于2008年11月18日在北美首发、2008年11月21日在欧洲先后推…

【深入学习Redis丨第八篇】详解Redis数据持久化机制

前言 Redis支持两种数据持久化方式&#xff1a;RDB方式和AOF方式。前者会根据配置的规则定时将内存中的数据持久化到硬盘上&#xff0c;后者则是在每次执行写命令之后将命令记录下来。两种持久化方式可以单独使用&#xff0c;但是通常会将两者结合使用。 一、持久化 1.1、什么…

MySQL【知识改变命运】04

复习&#xff1a; 1&#xff1a;CURD 1.1Create &#xff08;创建&#xff09; 语法&#xff1a; insert [into] 表名 [column[,column]] valuse(value_list)[,vaule_list]... value_list:value,[value]...创建一个实例表&#xff1a; 1.1.1单⾏数据全列插⼊ values_l…

Python爬虫之正则表达式于xpath的使用教学及案例

正则表达式 常用的匹配模式 \d # 匹配任意一个数字 \D # 匹配任意一个非数字 \w # 匹配任意一个单词字符&#xff08;数字、字母、下划线&#xff09; \W # 匹配任意一个非单词字符 . # 匹配任意一个字符&#xff08;除了换行符&#xff09; [a-z] # 匹配任意一个小写字母 […

CSS之一

目录 简介 CSS 语法规范 CSS 代码风格 1.样式格式书写 2.样式大小写 CSS 基础选择器 选择器分类 标签选择器 类选择器 案例之画盒子 多类型使用 id选择器 通配符选择器 font-family设置字体 字体系列 字体大小 字体粗细 文字样式 字体复合属性 示例 CSS 文…

【力扣 | SQL题 | 每日3题】力扣1107,1112, 1077

今天三道mid题都可以用窗口函数轻松秒杀。 1. 力扣1107&#xff1a;每日新用户统计 1.1 题目&#xff1a; Traffic 表&#xff1a; ------------------------ | Column Name | Type | ------------------------ | user_id | int | | activity | enum …

mysql模糊查询优化

mysql模糊查询优化 一、合理使用索引 如下SQL举例&#xff1a; SELECT username,age FROM WHERE username LIKE ‘hysen%’ 如果username字段有索引&#xff0c;前缀匹配会走索引&#xff0c;如 ‘%hysen’或’%hysen%’ 则无法走索引。 二、使用反向索引 对于需要使用后缀…

解决关于HTML+JS + Servlet 实现前后端请求Session不一致的问题

1、前后端不分离情况 在处理session过程中&#xff0c;如果前后端项目在一个容器中&#xff0c;session是可以被获取的。例如如下项目结构&#xff1a; 结构 后端的代码是基本的设置值、获取值、销毁值的内容&#xff1a; 运行结果 由此可见&#xff0c;在前后统一的项目中&a…

Redis 配置小插曲

前言&#xff1a;当今&#xff0c;我们进行后端部署redis时候&#xff0c;总是会遇到各种问题&#xff0c;这不今天就发现了&#xff0c;redis在下载下来的时候&#xff0c;redis.windows.conf&#xff0c;文件中&#xff0c;默认是没有为redis配置密码才被允许进行登录的&…

《Linux从小白到高手》综合应用篇:详解Linux系统调优之服务器硬件优化

List item 本篇介绍Linux服务器硬件调优。硬件调优主要包括CPU、内存、磁盘、网络等关键硬件组。 1. CPU优化 选择适合的CPU&#xff1a; –根据应用需求选择多核、高频的CPU&#xff0c;以满足高并发和计算密集型任务的需求。CPU缓存优化&#xff1a; –确保CPU缓存&#x…

Go语言反射机制详解:通过反射获取结构体的字段和方法

在Go语言中&#xff0c;反射&#xff08;Reflection&#xff09; 是一种强大的工具&#xff0c;允许我们在程序运行时动态地检查和修改变量的类型、 反射在很多场景中都有广泛的应用&#xff0c;如ORM&#xff08;对象关系映射&#xff09;框架、序列化与反序列化工具等。 一、…

SAP导出excel报错:发现“EXPORT.XLSX“中的部分内容有问题。是否让我们尽量尝试恢复?如果您信任此工作簿的源,请单击“是”。

1.问题描述&#xff1a;SAP报表程序导出excel的时报错 2.问题原因 文本信息中包含了非法符号&#xff08;SAP不认识的符号&#xff09; 比如&#xff1a;NLSY10 3.解决方式&#xff0c;把这个文本信息特殊符号去掉&#xff0c;就可以恢复正常了。 怎么找这个特殊符号&#…

2019年计算机网络408真题解析

第一题&#xff1a; 解析&#xff1a;OSI参考模型第5层完成的功能 首先&#xff0c;我们需要对OSI参考模型很熟悉&#xff1a;从下到上依次是&#xff1a;物理层-数据链路层-网络层- 运输层-会话层-表示层-应用层&#xff0c;由此可知&#xff0c;题目要问的是会话层的主要功能…

第十五章 RabbitMQ延迟消息之延迟插件

目录 一、引言 二、延迟插件安装 2.1. 下载插件 2.2. 安装插件 2.3. 确认插件是否生效 三、核心代码 四、运行效果 五、总结 一、引言 上一章我们讲到通过死信队列组合消息过期时间来实现延迟消息&#xff0c;但相对而言这并不是比较好的方式。它的代码实现相对来说比…

嵌入式开发:STM32 硬件 CRC 使用

测试平台&#xff1a;STM32G474系列 STM32硬件的CRC不占用MCU的资源&#xff0c;计算速度快。由于硬件CRC需要配置一些选项&#xff0c;配置不对就会导致计算结果错误&#xff0c;导致使用上没有软件计算CRC方便。但硬件CRC更快的速度在一些有时间资源要求的场合还是非…

编程的魅力

在数字时代的浪潮中&#xff0c;编程已成为连接现实与虚拟世界的桥梁&#xff0c;它不仅塑造了我们的生活方式&#xff0c;还深刻影响着科技进步的每一步。编程&#xff0c;这一看似复杂而神秘的领域&#xff0c;实则蕴含着无限的创造力和可能性。本文将深入探讨编程的魅力、基…

R语言中,.RData 和 .rds 的区别

.RData 和 .rds 是 R 语言中两种不同的数据保存格式&#xff0c;二者有一些关键的区别&#xff1a; 1. 存储内容的类型&#xff1a; .RData 文件&#xff1a;可以同时保存多个对象&#xff08;如数据框、向量、列表等&#xff09;&#xff0c;当你加载 .RData 文件时&#xf…