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

Bootstrap5

Bootstrap5-容器

容器是Bootstrap—个基本的构建块,它包含、填充和对齐给定设备或视口中的內容。
Bootstrap 需要一个容器元素来包裏网站的内容
我们可以使用以下两个容器类:

  • .container 类用于固定宽度并支持响应式布局的容器。
  • .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

固定宽度

  • .container 类用于创建固定宽度的响应式页面。

注意:宽度(max-width) 会根据屏幕宽度同比例放大或缩小。

  100% 宽度
.container-fluid 类用于创建—个全屏幕尺寸的容器,容器始终跨越整个屏幕宽度(width 始终为 100%):
二者之间的共同点为,两者都可以将高度设置成auto,即自动模式。最大的不同就是宽度的设定上。
container根据屏募宽度利用媒体查询,已经设定了固定的宽度,作用为阶段性的改变宽度,所以在改变浏览器的大小时,页面是一个阶
—个阶段变化的。
container-fluid则是将宽度设定为auto,所以当缩放浏览器时,它会保持全屏大小,始终保持100%的宽度。

Bootstrap5-网格

Bootstrap5 网格系统
   Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
   我们也可以根据自己的需要,定义列数。Bootstrap 5 的网格系统是响应式的,列会根据屏幕大小自动重新排列。请确保每一行中列的总和等于或小于12。
Bootstrap 5 网格系统有以下6个类:
  • .col-针对所有设备。
  • .col-sm-平板 - 屏幕宽度等于或大于 576px。
  • .col-md- 桌面显示器 -屏幕宽度等于或大于 768px。
  • .col-g-大桌面显示器-屏幕宽度等于或大于 992px。
  • .col-xl-特大桌面显示器-屏幕宽度等于或大于 1200px。
  • .col-xxl-超大桌面显示器 -屏幕宽度等于或大于1400px。
 网格系统规则

Bootstrap5 网格系统规则:

  • 网格每一行需要放在设置了.container(固定宽度)或 .container-fluid(全屏宽度)类的容器中,这样就可以自动设置一些外边距与内边距。
  • 使用行来创建水平的列组。
  • 内容需要放置在列中,并且只有列可以是行的直接子节点。
  • 预定义的类如.row 和.col-sm-4 可用于快速制作网格布局。

要进行栅格系统操作,首先就要创建栅格系统的容器。
rcontainer和”row共同组成栅格容器,”row”代表的就是一行。
创建栅格容器后,设置名为col-md-的div,当尾数为1时,表示每个div的宽度占1/12,所以每行最多可以放置12个子div。
如果超过12个,则会在下一行显示。

不等宽相应式列

相关文章:

Bootstrap5

Bootstrap5-容器 容器是Bootstrap—个基本的构建块,它包含、填充和对齐给定设备或视口中的內容。 Bootstrap 需要一个容器元素来包裏网站的内容 我们可以使用以下两个容器类: .container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用…...

宝塔部署纯Vue项目,无后端

1.打包项目 生成一个dist文件夹 2.创建云服务器根目录 3.创建站点 4.上传文件 5.访问...

spring boot3整合邮件服务实现邮件发送功能

⛰️个人主页: 蒾酒 🔥系列专栏:《spring boot实战》 目录 内容概要 开通服务 依赖引入 配置属性 创建邮件发送工具类 测试 最近发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家…...

算法刷题day54:搜索(一)

目录 引言一、池塘计数二、城堡问题三、山峰和山谷四、迷宫问题五、武士风度的牛六、抓住那头牛七、矩阵距离八、魔板 引言 针对于蓝桥杯,搜索问题还是非常之重要的,在省赛前深知暴搜的重要性,所以提前先把提高课的搜索一章给看了&#xff0…...

深入了解Redis的过期策略和内存淘汰机制

✨✨谢谢大家捧场,祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天开心哦!✨✨ 🎈🎈作者主页: 喔的嘛呀🎈🎈 ✨✨ 帅哥美女们,我们共同加油!一起进步&am…...

小白不知道怎么投稿?记住这个好方法

作为一名单位信息宣传员,我最初踏上这条道路时,满心憧憬着通过文字传递我们单位的精彩瞬间,让社会听见我们的声音。然而,理想与现实之间的距离,却在一次次邮箱投稿的石沉大海中渐渐清晰。那时的我,像所有“小白”一样,以为只要用心撰写稿件,通过电子邮件发给各大媒体,就能收获满…...

gRPC - Protocol Buffer 编译器安装

文章目录 Protocol Buffer 编译器安装如何安装 Protocol Buffer 编译器使用包管理器安装Linux 上,使用 apt 或 apt-get,例如:macOS 上,使用 Homebrew: 安装预编译的二进制文件(任何操作系统)其他…...

【Linux】centos7下载安装Python3.10,下载安装openssl1.1.1

目录 centos7下载安装Python(版本3.10.14) (1)网页下载python压缩包,并解压缩 (2)编译安装 Python在make altinstall时,报错及解决 (3)将安装目录和可执…...

通过 python 操作mongodb

库引入 Python 要连接 MongoDB 需要 MongoDB 驱动,这里我们使用 PyMongo 驱动来连接。 import pymongo 链接数据库 创建数据库需要使用 MongoClient 对象,并且指定连接的ip和端口号。 myclientpymongo.MongoClient("localhost",27017)#连接…...

若依框架对于后端返回异常后怎么处理?

1、后端返回自定义异常serviceException 2、触发该异常后返回json数据 因为若依对请求和响应都封装了,所以根据返回值response获取不到Code值但若依提供了一个catch方法用来捕获返回异常的数据 3、处理的方法...

vs code怎么补全路径,怎么快捷输入文件路径

安装插件: 链接:https://marketplace.visualstudio.com/items?itemNamejakob101.RelativePath 使用 按住 Ctrl Shift H,弹出窗口,输入文件补全,回车就可以了 排除文件 如果你的项目下文件太多,它会…...

git分支开发主干合并流程

文章目录 一、分支开发二、主干合并三、删除合并过的分支 一、分支开发 创建分支git branch <分支名> # git branch my_new_branch开发后提交代码git commit -m 本次开发内容 # git commit -m 增加登录保持功能同步远端仓库git push origin <分支名> # git push o…...

01Python相关基础学习

Python基础 模块相关导入模块sys模块 模块相关 导入模块 1. import 模块名 2. import 模块名 as 别名 3. from 模块名 import 成员名 as 别名sys模块 1. sys.argv 介绍: 实现从程序的外部想程序传递参数返回的是一个列表,第一个元素是程序文件名,第二个元素是程序外部传入的…...

InTouch历史报警、历史事件按时段查询,导出

简介&#xff1a;本插件基于上位机组态InTouch的历史报警、操作记录而开发 适用InTouch版本&#xff1a;不限 适用Windows系统&#xff1a;不限 适用数据库&#xff1a;SQL Server 标记名点数&#xff1a;不限 配套软件安装&#xff1a;Excel、WPS、SQL Server 功能&…...

网络攻防概述(基础概念)

文章目录 APTAPT概念APT攻击过程 网络空间与网络空间安全网络空间(Cyberspace)网络空间安全(Cyberspace Security) 网络安全属性机密性(Confidentiality或Security)完整性(Integrity)可用性&#xff08;Availability&#xff09;不可否认性&#xff08;Non-repudiation&#xf…...

了解Java垃圾收集

Java 的垃圾收集机制在 Java 应用程序开发中至关重要。此机制对于通过消除不再使用的对象来释放内存空间得过程来说至关重要。在这篇文章中&#xff0c;我带大家深入了解下 Java 垃圾收集的机制&#xff0c;并探索其工作原理、优点以及实现最佳性能的最佳实践。 1.什么是 Java…...

快速搭建 WordPress 外贸电商网站指南

本指南全面解析了在 Hostinger 平台上部署 WordPress 外贸电商网站的详细步骤&#xff0c;涵盖托管方案选择、WordPress 一键安装、主题挑选与演示数据导入、主题个性化定制、SEO插件插件 AIOSEO 安装、通过 GTranslate 实现多语言自动翻译、地区访问控制插件&#xff0c;助力用…...

网络编程 —— Http进度条

第一种下载带进度的方法 string url "https://nodejs.org/dist/v20.10.0/node-v20.10.0-x64.msi"; 1使用getASync获取服务器响应数据 参数1请求的路径&#xff0c; 参数2 HttpCompletionOption.ResponseHeadersRead 请求完成时候等待请求带什么程度才…...

5月26(信息差)

&#x1f30d; 珠峰登顶“堵车”后冰架断裂 5人坠崖 2人没爬上来&#xff01; 珠峰登顶“堵车”后冰架断裂 5人坠崖 2人没爬上来&#xff01; &#x1f384; Windows 11 Beta 22635.3646 预览版发布&#xff1a;中国大陆地区新增“微软电脑管家”应用 ✨ 成都限购解除即将满…...

【Redis】持久化操作详解

Redis 持久化操作详解 Redis 实现持久化的时候&#xff0c;具体是按照什么样的策略来实现的呢&#xff1f; Redis支持两种方式的持久化&#xff0c;一种是RDB方式、另一种是AOF&#xff08;append-only-file&#xff09;方式&#xff0c;两种持久化方式可以单独使用其中一种&…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

C++ 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...