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

1.Bootstrap

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

1.1container类

        响应式布局容器的宽度

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

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

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

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

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

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

1.2container-fluid类

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

1.3栅格系统

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

        具体参考Bootstrap来进行实现。

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

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

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

相关文章

康养为松,智能为鹤:华为全屋智能画出的松鹤长春图

在道家文化中,喜欢将松与鹤并举,以其长寿与仙逸表达对老年人的美好祝愿。松鹤延年、松龄鹤寿等成语皆出于此。松鹤长春图,也成为国画当中的经久不衰的题材。 当我们迎来老龄化时代,“松鹤长春”则成为了整个社会的共同期待。 根据…

【初阶数据结构】排序——插入排序

目录 前言直接插入排序希尔排序 前言 排序:所谓排序就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作。排序算法,就是如何使得记录按照要求排列的方法。   例如:买东西时会根据销量或价…

java并发编程笔记 之 线程和进程

文章目录 前言线程线程优先级和时间片创建多线程及运行线程的状态 进程查看进程的命令进程的通信方式 线程和进程的区别从关系上疑问集锦 前言 并发 1、并发是指在同一时间段内,计算机系统能够处理多个任务的能力。 2、在并发编程中,我们可以理解为多个…

代码随想录算法训练营第三十九天 | 198.打家劫舍 ,213.打家劫舍II,337.打家劫舍III

第三十九天打卡,今天解决打家劫舍系列问题,树形dp比较难。 198.打家劫舍 题目链接 解题过程 dp[i]:考虑下标i(包括i)以内的房屋,最多可以偷窃的金额为dp[i]。 要么不偷这一间,那就是前面那间…

毕业设计选题:基于ssm+vue+uniapp的校园失物招领小程序

开发语言:Java框架:ssmuniappJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包:M…

大瓜-CSP-J/S2024第一轮认证题目涉嫌泄露。竞赛公平能否维护?

2024年全国信息学奥赛(CSP-J/S)泄题事件在竞赛界掀起了巨大的波澜。这场赛事本应是全国最具公信力的编程竞赛之一,但部分题目在考试前已被某些培训机构押中,这一泄题行为不仅让考生与家长感到愤怒,也让公众对奥赛的公平…

scp 命令:在两台主机间远程传输文件

一、命令简介 ​scp​ 命令使用 SSH ​加密的方式在本地主机和远程主机之间复制文件。 ‍ 二、命令参数 格式 scp [选项] 发送方主机和目录 接收方主机和目录注意:左边是发送方,右边是接收方。固定格式。 示例 #示例1 scp ~/test.txt soulio172.1…

豆包MarsCode体验

这个AI助手贴合做题者的思路,可以实时对代码进行分析,提出纠错、优化、规范性意见,非常好用。

基于数据挖掘的航空客户满意度分析预测系统

温馨提示:文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 航空公司致力于提供多样化的服务以满足乘客需求,包括但不限于提供免费无线网络、免费食物饮品、提供网上预约服务、飞机出口位置、座椅舒适度、卫生状况等,并希望以此提升乘…

构造者模式多种实现方式

构造者模式 ​ 构造者模式建议将对象构造代码从产品类中抽取出来, 并将其放在一个名为构造者的独立对象中 ​ 构建者模式也是用来创建对象,但是相对于工厂模式来说,建造者模式适用于构建复杂对象,而工厂模式适用于创建对象的封装…

asp.net core日志与异常处理小结

asp.net core的webApplicationBuilder中自带了一个日志组件,无需手动注册服务就能直接在控制器中构造注入,本文主要介绍了net core日志与异常处理小结,需要的朋友可以参考下 ILogger简单使用 asp.net core的webApplicationBuilder中自带了一个日志组件…

网络安全-长亭雷池waf的sql绕过,安全狗绕过(5种绕过3+2)

目录 一、环境 二、讲解 三、绕过前思路整理 3.1 思路 3.1.1 入门思路 0x00截断filename 3.1.2 双写上传描述行(差异绕过)【成功】 3.1.3双写整个 part 开头部分 3.1.4 构造假的 part 部分 1【成功】 3.1.5 构造假的 part 部分2【成功】 3.1.6 两个 bounda…

闲盒支持的组网方式和注意事项

1. 直连光猫拨号​ 通过光猫拨号,设备直连光猫的设备,需要对光猫开启UPNP并关闭DMZ 如果只接一个盒子,建议直接针对盒子IP开dmz。 2. 直连路由器​ 通过路由器拨号,设备直连路由器的设备,需要对路由器开启UPNP并关闭…

Sql Developer日期显示格式设置

默认时间格式显示 设置时间格式:工具->首选项->数据库->NLS->日期格式: DD-MON-RR 修改为: YYYY-MM-DD HH24:MI:SS 设置完格式显示:

【Java数据结构】 ---对象的比较

乐观学习,乐观生活,才能不断前进啊!!! 我的主页:optimistic_chen 我的专栏:c语言 ,Java 欢迎大家访问~ 创作不易,大佬们点赞鼓励下吧~ 前言 上图中,线性表、堆…

【嵌入式linux开发】SPI设备文件操作BMI088传感器

【嵌入式linux开发】SPI设备文件操作BMI088传感器 前言一、数据手册浅读二、代码 前言 在本篇博客中,将从BMI088传感器的数据手册出发,简单了解之后,展示如何通过SPI设备文件与传感器进行通信。除了使用linux文件设备操作spi接口&#xff0c…

微软 Win11 24H2 RP 26100.1876 预览版发布!附详细更新日志

系统之家于9月24日发出最新报道,微软为Release Preview频道的Windows Insider项目成员,发布了适用Windows11 24H2版本更新的 KB5043178,更新后,系统版本号将升至26100.1876。此更新为用户带来了不同的新功能,例如打开开…

力扣每日一题 字符串中最多数目的子序列 贪心 字符串 前缀和

Problem: 2207. 字符串中最多数目的子序列 &#x1f468;‍&#x1f3eb; 参考题解 class Solution {public long maximumSubsequenceCount(String s, String pattern){long res 0;long cnt1 0, cnt2 0;for (int i 0; i < s.length(); i){if (s.charAt(i) pattern.cha…

【有啥问啥】Chain of Goal-Oriented Reasoning(CoGOR)原理详解

Chain of Goal-Oriented Reasoning&#xff08;CoGOR&#xff09;原理详解 引言 在人工智能领域&#xff0c;实现真正意义上的智能一直是研究的重点。传统的 AI 方法在处理复杂、开放式的问题时往往显得力不从心。为了解决这一问题&#xff0c;Chain of Goal-Oriented Reason…

从汽车高速线束角度浅谈中控屏黑屏、闪屏及信号阈值低故障-之AEM线束测试仪应用案例

故障成因和解决方案 随着车载信息娱乐技术的迅速发展&#xff0c;中控屏已经成为现代汽车的标配。然而&#xff0c;许多主机厂和消费者在车辆使用过程中常常遇到中控屏出现黑屏、闪屏以及信号阈值低等问题&#xff0c;给使用带来了诸多困扰。本文将从汽车高速线束的角度&#…