WebPage-Bootstrap框架(container类,container-fluid类,栅格系统)

news2024/12/23 19:44:04

1.Bootstrap

        Bootstrap为页面内容和栅格系统包裹了一个.container容器,框架预先定义类

1.1container类

        响应式布局容器的宽度

手机-小于768px 宽度设置100%;

平板-大于等于768px 设置宽度为750px

桌面显示器-大于等于992px 设置宽度 970px

大屏幕显示器-大于等于1200px 宽度设置为 1170px;

设置宽度比屏幕尺寸小,留取左右空白居中对齐;

在只需在引入class对应的类即可实现屏幕媒体查询

1.2container-fluid类

        流式布局容器百分百宽度,占据全部视口容器,适合单独的移动开发;

1.3栅格系统

        视口宽度平均分为12列,不同的内容在不同的列区域内。等比列缩放效果实现。通过累加对应的类名来进行实现不同屏幕下占列内容多少。

        具体参考Bootstrap来进行实现。

        使用框架来快捷的实现媒体查询,、-响应式布局 

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

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

相关文章

医院排班|医护人员排班系统|基于springboot医护人员排班系统设计与实现(源码+数据库+文档)

医护人员排班系统目录 目录 基于springboot医护人员排班系统设计与实现 一、前言 二、系统功能设计 三、系统实现 医护类型管理 排班类型管理 科室信息管理 医院信息管理 医护信息管理 四、数据库设计 1、实体ER图 2、具体的表设计如下所示: 五、核心代码…

“AI+Security”系列第3期(五):AI技术在网络安全领域的本地化应用与挑战

近日,由安全极客、Wisemodel 社区、InForSec 网络安全研究国际学术论坛和海升集团联合主办的“AI Security”系列第 3 期技术沙龙:“AI 安全智能体,重塑安全团队工作范式”活动顺利举行。此次活动吸引了线上线下超过千名观众参与。 在活动中…

shell中对xargs命令传参进行编辑

以文件解压为例,将当前路径下的所有gz文件解压到同名的log文件中,解压命令如下所示: ls *.gz| xargs -n 1 -P 4 -I {} bash -c zcat "{}" > $(echo "{}" | sed "s/gz$/log/g") 执行结果如下图所示&#x…

mamba-yolo模型的深度学习环境配置

本文将介绍如何配置目标检测模型mamba-yolo的深度学习环境 1. 环境要求 Python > 3.9 (本文使用python-3.11) CUDA > 11.6 (本文使用CUDA-11.8) Pytorch > 1.12.1 (本文使用torch-2.4.0) Linu…

【C++】STL标准模板库容器——set

🦄个人主页:修修修也 🎏所属专栏:C ⚙️操作环境:Visual Studio 2022 目录 📌关联式容器set(集合)简介 📌set(集合)的使用 🎏set(集合)的模板参数列表 🎏set(集合)的构造函数 🎏set(集合)的迭代…

JavaScript异步编程:async、await的使用

async 和 await 是在 ECMAScript 2017 (ES7) 中引入的特性,用于处理异步操作。它们允许你以一种更加简洁和同步的方式来编写异步代码。 async 函数表示它会返回一个 Promise,而 await 关键字用于等待一个 Promise 解决。 关于 promise 的详细介绍&#…

蜂窝物联网全网通sim卡切网技术方案软硬件实现教程(设备根据基站信号质量自动切网)

01 物联网系统中为什么要使用三合一卡 三合一卡为用户解决了单一运营商网络无法全覆盖的缺陷,避免再次采购的经济成本以及时间成本和因没有信号设备停止工作造成的损失,保证仅需一次采购并提高设备工作效率和入网活跃度。例如下面地区的设备&#xff0…

Spring Web MVC课后作业

目录 1.加法计算器 2.⽤户登录 3.留⾔板 1.加法计算器 (1)需求分析 加法计算器功能, 对两个整数进⾏相加, 需要客⼾端提供参与计算的两个数, 服务端返回这两个整数计算 的结果。 (2)接⼝定义 请求路径: calc/sum 请…

Java框架学习(mybatis)(01)

简介:以本片记录在尚硅谷学习ssm-mybatis时遇到的小知识 详情移步:想参考的朋友建议全部打开相互配合学习! 官方文档: MyBatis中文网https://mybatis.net.cn/index.html 学习视频: 067-mybatis-介绍和对比_哔哩哔…

Linux本地服务器搭建开源监控服务Uptime Kuma与远程监控实战教程

文章目录 前言**主要功能**一、前期准备本教程环境为:Centos7,可以跑Docker的系统都可以使用本教程安装。本教程使用Docker部署服务,如何安装Docker详见: 二、Docker部署Uptime Kuma三、实现公网查看网站监控四、使用固定公网地址…

docker - maven 插件自动构建镜像(构建镜像:ebuy-docker:v2.0)

文章目录 1、docker服务端开启远程访问2、在pom.xml文件plugins下添加Maven的docker插件3、编写dockerfile文件4、执行maven的打包命令5、查看 镜像 ebuy-docker:v2.06、创建 容器 ebuy-dockerv2.0 上面手动构建镜像的过程比较繁琐,使用Maven的docker插件可以实现镜…

MySQL数据库进阶知识(五)《锁》

学习目标: 一周掌握数据库锁相关知识 学习内容: 一. 概述 介绍 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中,除传统的计算资源(CPU、RAM、I/O)的争用以外,数据也是一种供许多用户共…

Word2vec的应用

目录 1.分词 2.模型训练 3.可视化 4.知识点个人理解 pip install gensim -i https://pypi.tuna.tsinghua.edu.cn/simple #若在jupyter notebook中安装: ! pip install gensim -i https://pypi.tuna.tsinghua.edu.cn/simple #导包 import jieba import re import…

一种能够一机两用的源代码保密方案

在数字化时代,企业面临的数据泄露风险日益增加,保护机密数据的安全成为了一项重要任务。SDC沙盒技术作为一种先进的数据保密解决方案,通过创新的沙盒概念,在防泄密领域展现了其独特的价值和作用。 一、SDC沙盒技术简介 SDC沙盒技…

使用ucharts写的小程序页面柱状图上方没有数字

使用uCharts官网 - 秋云uCharts跨平台图表库写的柱状图如何让柱子上放没有数据 更改前 更改后 使用uCharts官网 - 秋云uCharts跨平台图表库 写的小程序图表,无论是柱状图还是折线图添加一个 dataLabel: false, // 不显示数据 九可以实现不显示数据 const opts …

必看!道路运输企业主要负责人和安全生产管理人员考核新动向

必看!道路运输企业主要负责人和安全生产管理人员考核新动向 道路运输企业两类人员#叙后尘 道路运输企业主要负责人和安全生产管理人员报考 交通运输主管部门具体组织实施本行政区域内道路运输企业主要负责人和安全生产管理人员安全考核有关工作,并在…

无网络entos7报错ImportError: /lib64/libm.so.6: version `GLIBC_2.27‘ not found更新glibc

最近在尝试使用sklearn的升级版cuml,因为是一台没有连接互联网的gpu机器,所以构建cuml环境过程很坎坷,需要各种将各种whl包在线下载后上传到服务器中。 当我终于解决完包的互相依赖问题后,在import cuml时候遇到一个错误&#xff…

【线程】线程池

线程池通过一个线程安全的阻塞任务队列加上一个或一个以上的线程实现,线程池中的线程可以从阻塞队列中获取任务进行任务处理,当线程都处于繁忙状态时可以将任务加入阻塞队列中,等到其它的线程空闲后进行处理。 线程池作用: 1.降…

三,MyBatis-Plus 的各种查询的“超详细说明”,比如(等值查询,范围查询,模糊查询...)

三,MyBatis-Plus 的各种查询的“超详细说明”,比如(等值查询,范围查询,模糊查询…) 文章目录 三,MyBatis-Plus 的各种查询的“超详细说明”,比如(等值查询,范围查询,模糊查询...)1. …

2024中国新能源汽车零部件交易会,开源网安展示了什么?

近日,2024中国新能源汽车零部件交易会在十堰国际会展中心举行。开源网安车联网安全实验室携车联网安全相关产品及解决方案亮相本次交易会,保障智能网联汽车“车、路、云、网、图、边”安全,推动智能网联汽车技术突破与产业化发展。 中国新能源…