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

不等宽相应式列

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

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

相关文章

idea上传git命令

git init git remote add origin git add . git commit -m "标题" git push -u origin master

提取COCO 数据集的部分类

1.python提取COCO数据集中特定的类 安装pycocotools github地址:https://github.com/philferriere/cocoapi pip install githttps://github.com/philferriere/cocoapi.git#subdirectoryPythonAPI若报错,pip install githttps://github.com/philferriere…

232转Profinet网关连接霍尼韦尔扫码枪在汽车生产线的应用

232转Profinet网关是一种能够将RS232串口通信协议转换为Profinet以太网通信协议的设备。在汽车生产线上,使用232转Profinet网关连接霍尼韦尔扫码枪,可以显著提高生产效率和数据管理的准确性。232转Profinet网关允许霍尼韦尔扫码枪通过串口连接到网关&…

Java 实验12 线程同步与通信

(一)实验目的 1、掌握JAVA中多线程的实现方法; 2、重点掌握多线程的同步与通信机制; 3、熟悉JAVA中有关多线程同步与通信的方法 ; 4、能使用多线程机制解决实际应用中的线程同步与通信问题。 (二&…

Java后端面经

1.可重复读,已提交读,这两个隔离级别表现的现象是什么,区别是什么样的? 可重复读:表示整个事务看到的事务和开启后的事务能看到的数据是一致的,既然数据是一致的,所以不存在不可重复读。而且不…

OSPF减少LSA更新量1

OSPF的LSA优化 一、汇总——优化骨干区域 (1)域间汇总ABR设备基于某个区域的1/2类LSA计算所得的最佳路由,共享给其他区域时,进行汇总传递。 [r2]ospf 1 [r2-ospf-1]area 1——明细路由所在区域,该ABR设备必须和明细路由在同一区域 [r2-ospf…

研二学妹面试字节,竟倒在了ThreadLocal上,这是不要应届生还是不要女生啊?

一、写在开头 今天和一个之前研二的学妹聊天,聊及她上周面试字节的情况,着实感受到了Java后端现在找工作的压力啊,记得在18,19年的时候,研究生计算机专业的学生,背背八股文找个Java开发工作毫无问题&#x…

【简单介绍下线性回归模型】

🌈个人主页: 程序员不想敲代码啊 🏆CSDN优质创作者,CSDN实力新星,CSDN博客专家 👍点赞⭐评论⭐收藏 🤝希望本文对您有所裨益,如有不足之处,欢迎在评论区提出指正,让我们共…

【FPGA】Verilog:2-bit 二进制比较器的实现(2-bit binary comparator)

解释 2-bit 二进制比较器仿真结果及过程说明(包括真值表和卡诺图) 真值表和卡洛图如下: 2-bit Binary Comparator A1 A2 B1

SAPUI5基础知识2 - 手动创建一个SAPUI5的项目

1. 前言 在本篇文章中,我们将手动一步一步建立出第一个SAPUI5的 ‘Hello World!’ 项目。 2. 步骤详解 2.1 在BAS中建立Dev Space 进入SAP Business Application Studio的Dev Space Manger,选择创建Dev Space。 勾选HTML5 Application Template插件…

ComfyUI简单介绍

🍓什么是ComfyUI ComfyUI是一个为Stable Diffusion专门设计的基于节点的图形用户界面,可以通过各种不同的节点快速搭建自己的绘图工作流程。 软件打开之后是长这个样子: 同时软件本身是github上的一个开源项目,开源地址为&#…

使用Java 读取PDF表格数据并保存到TXT或Excel

目录 导入相关Java库 Java读取PDF表格数据并保存到TXT Java读取PDF表格数据并保存到Excel 在日常工作中,我们经常需要处理来自各种来源的数据。其中,PDF 文件是常见的数据来源之一。这类文件通常包含丰富的信息,其中可能包含重要的表格数据…

10.SpringBoot 统一处理功能

文章目录 1.拦截器1.1在代码中的应用1.1.1定义拦截器1.1.2注册配置拦截器 1.2拦截器的作用1.3拦截器的实现 2.统一数据返回格式2.1 为什么需要统⼀数据返回格式?2.2 统⼀数据返回格式的实现 3.统一异常处理4.SpringBoot专业版创建项目无Java8版本怎么办?…

C++拓展之scanf和printf

scanf和printf,这东西,说难也不难,可一旦深入学,学两天都可能学不完。 为了输入输出,我们要把这些占位符学一学。 我们来看看AI是怎么回答的。 Q:C格式化占位符有哪些? A:C中常用的…

theharvester一键收集域名信息(KALI工具系列十)

目录 1、KALI LINUX简介 2、theharvester工具简介 3、在KALI中使用theharvester 3.1 用搜索引擎扫描 3.2 扫描并输出结果 3.3 扫描某域名下的所有账号 3.4 使用所有的搜索引擎扫描 4、总结 1、KALI LINUX简介 Kali Linux 是一个功能强大、多才多艺的 Linux 发行版&…

Nodejs+Websocket+uniapp完成聊天

前言 最近想做一个聊天,但是网上的很多都是不能实现的,要么就是缺少代码片段很难实现websocket的链接,更别说聊天了。自己研究了一番之后实现了这个功能。值得注意的是,我想在小程序中使用socket.io,不好使&#xff0…

在通过跨网文件交换时,如何保障科研结构核心研究数据?

当今科研领域,数据如同生命线,支撑着每一个突破性发现的诞生。随着国际合作的加深,跨网文件交换成了常态,但这也为科研机构的核心研究数据安全带来了一系列挑战。想象一下,那些精心搜集和分析的宝贵数据,在…

正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-19.1讲 串口格式化输出printf

前言: 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM(MX6U)裸机篇”视频的学习笔记,在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…

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

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

Vue.js - 计算属性与侦听器 【0基础向 Vue 基础学习】

文章目录 计算属性 computedcomputed 的使用方法computed 与 method 的区别计算属性完整写法 watch 侦听器(监视器)简单写法 → 简单类型数据,直接监视完整写法 → 添加额外配置项 计算属性 computed computed 的使用方法 **概念&#xff1…