Bootstrap5

news/2024/7/24 16:24:12/文章来源:https://blog.csdn.net/Kongfutu/article/details/139236040

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个,则会在下一行显示。

不等宽相应式列

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

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

相关文章

左外连接和右外连接的区别?举例说明——以力扣sql 1378. 使用唯一标识码替换员工ID为例

左外连接(LEFT JOIN)和右外连接(RIGHT JOIN)的主要区别在于哪个表的所有行会保留在结果集中 1. 左外连接 (LEFT JOIN) 左外连接会返回左表中的所有行以及右表中符合连接条件的行。如果右表中没有匹配的行,结果集中右…

剖析【C++】——类与对象(上)超详解——小白篇

目录 1.面向过程和面向对象的初步认识 1.面向过程(Procedural Programming) 2.面向对象(Object-Oriented Programming) 概念: 特点: 总结 2.C 类的引入 1.从 C 语言的结构体到 C 的类 2.C 中的结构…

我的世界开服保姆级教程

前言 Minecraft开服教程 如果你要和朋友联机时,可以选择的方法有这样几种: 局域网联机:优点:简单方便,在MC客户端里自带。缺点:必须在同一局域网内。 有些工具会带有联机功能:优点:一…

【技术分享】Maven常用配置

一、Maven简介 (一)为什么使用 Maven 由于 Java 的生态非常丰富,无论你想实现什么功能,都能找到对应的工具类,这些工具类都是以 jar 包的形式出现的,例如 Spring,SpringMVC、MyBatis、数据库驱…

Autodl如何进行实例使用(同区)

一、首先找到之前保存的实例 二、点击更多然后选择克隆实例 三、选择是否要保存之前的数据盘 四、选择空余的GPU进行创建即可

LLaMa系列模型详解(原理介绍、代码解读):LLaMA 2

LLaMA 2 大型语言模型(LLMs)作为高度能力的人工智能助手,在需要跨多个领域专家知识的复杂推理任务中表现出巨大潜力,包括编程和创意写作等专业领域。它们通过直观的聊天界面与人类互动,这导致了快速和广泛的公众采用。…

Android Studio自带Profiler工具进行CPU资源及线程问题分析步骤

1、运行需要检测CPU资源问题与线程问题的程序 这里以“com.example.opengltest”程序为例。 2、点击Profiler按钮 3、点击SESIONS ""号按钮选择设备,选择对应设备下的应用或进程 4、双击CPU区块 5、选择Trace config选项,选择“Java/Kotli…

【LeetCode】力扣第 399 场周赛 优质数对的总数 II

文章目录 1. 优质数对的总数 II 1. 优质数对的总数 II 题目链接 🍎该题涉及的小技巧:🐥 🐧①一次可以统计这个数的 两个因子 但是要注意 25 5 * 5,这种情况 5 只能统计一次噢🆒 解题思路: &#x1f427…

前端项目使用docker编译发版和gitlab-cicd发版方式

项目目录 app/ ├── container/ │ ├── init.sh │ ├── nginx.conf.template ├── src/ ├── .gitlab-ci.yml └── deploy.sh └── Dockerfile └── Makefilecontainer目录是放nginx的配置文件,给nginx镜像使用 .gitlab-ci.yml和Makefile是c…

vue2的方法与监听

vue2的方法 不可以使用箭头函数 <template> <div><div>{{sum2()}}</div><button click"add">add</button> </div></template><script> export default {data(){return{name:"张三",num:20,num2:3…

kafka监控配置和告警配置——筑梦之路

kafka_exporter项目地址&#xff1a;https://github.com/danielqsj/kafka_exporter docker-compose部署kafka_exporter # docker-compose部署多个kafka_exporter&#xff0c;每个exporter对接一个kafka# cat docker-compose.ymlversion: 3.1 services:kafka-exporter-opslogs…

基于STM32实现智能空气净化系统

目录 引言环境准备智能空气净化系统基础代码示例&#xff1a;实现智能空气净化系统 空气质量传感器数据读取风扇和滤网控制显示系统用户输入和设置应用场景&#xff1a;家庭空气净化与健康管理问题解决方案与优化收尾与总结 1. 引言 本教程将详细介绍如何在STM32嵌入式系统中…

【三数之和】python,排序+双指针

暴力搜索3次方的时间复杂度&#xff0c;大抵超时 遇到不会先排序 排序双指针 上题解 照做 class Solution:def threeSum(self, nums: List[int]) -> List[List[int]]:res[]nlen(nums)#排序降低复杂度nums.sort()k0#留两个位置给双指针i,jfor k in range(n-2):if nums[k]…

【上】王树森《小红书推荐系统公开课》- 课程笔记(推荐系统基础、召回、排序)

写在前面 本文为王树森老师《小红书推荐系统公开课》的课程笔记 课程来源&#xff1a;ShusenWang的个人空间-ShusenWang个人主页-哔哩哔哩视频 (bilibili.com)课程资料&#xff1a;GitHub - wangshusen/RecommenderSystem 由于篇幅较长&#xff0c;分为【上】【下】两篇文章…

Autodesk Flame 2025 for Mac:视觉特效制作的终极利器

在数字时代&#xff0c;视觉特效已经成为电影、电视制作中不可或缺的一部分。Autodesk Flame 2025 for Mac&#xff0c;这款专为视觉特效师打造的终极工具&#xff0c;将为您的创作提供无尽的可能。 Autodesk Flame 2025 for Mac拥有强大的三维合成环境&#xff0c;能够支持您…

ROS for LabVIEW:实现LabVIEW与ROS的无缝集成

ROS for LabVIEW是由Tufts大学开发的一套VI集合&#xff0c;旨在实现LabVIEW与ROS&#xff08;Robot Operating System&#xff09;的无缝集成。ROS是一个灵活的机器人软件框架&#xff0c;而LabVIEW则是一种强大的图形化编程工具。这个工具包的推出使得LabVIEW用户能够直接与R…

【吊打面试官系列】Java高并发篇 - 线程的调度策略?

大家好&#xff0c;我是锋哥。今天分享关于 【线程的调度策略?】面试题&#xff0c;希望对大家有帮助&#xff1b; 线程的调度策略? 线程调度器选择优先级最高的线程运行&#xff0c;但是&#xff0c;如果发生以下情况&#xff0c;就会终止线程的运行&#xff1a; 1、线程体…

基于jeecgboot-vue3的Flowable增加流程支持组件与element-plus组件导入支持

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、package.json文件需要增加相关流程组件&#xff0c;如下 "dependencies": {"element-plus/icons-vue": "^2.3.1","highlightjs/vue-plugin":…

BEVFormer论文详细解读

文章目录 1. 前言1.1 3D VS 4D1.2 .特征融合过程中可能遇到的问题1.3 .BEV提出背景1.4 .BEV最终得到了什么1.5 .输入数据格式 2. 背景/Motivation2.1 为什么视觉感知要用BEV&#xff1f;2.2 生成BEV视角的方法有哪些&#xff1f;为何选用Transformer呢&#xff1f; 3. Method/S…

【Typescript】通过变量的值即可获取变量的类型【typeof 变量】

注意&#xff1a;只要变量的类型准确,则typeof获取变量的类型就不会错 enum Test {a "a0",b "b0" }// 这里的a是一个变量的值 let a: Test.a "a0" as Test.a// 这里的typeof a是一个类型【Test.a】 let x: typeof a Test.a