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

news2024/11/18 1:43:09

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/2162477.html

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

相关文章

【全网最全】2024年华为杯研赛A题成品论文获取入口(后续会更新)

您的点赞收藏是我继续更新的最大动力! 一定要点击如下的卡片,那是获取资料的入口! 【全网最全】2024年华为杯研赛A题保奖思路matlab/py代码成品论文等(后续会更新完整 点击链接加入【2024华为杯研赛资料汇总】:https:…

linux驱动开发-arm汇编基础

目录 写在前面 1、Cortex-A7 处理器有 9 种处理模式 2、Cortex-A 寄存器组 通用寄存器 1、汇编语法 2、Cortex-A7 常用汇编指令 2.1 处理器内部数据传输指令 2.1.1 传输数据操作类型 1、MOV指令 2、MRS指令 3、MSR指令 2.2、存储器访问指令 2.2.1 LDR指令 2.2.2 …

IDEA:如何设置项目启动的JVM运行内存大小

IDEA版本不一样页面也不一样 -Xms20m -Xmx200m 其实在本地开发调试的时候不需要太大内存,如果测试性能建议放到运算服务器上面去跑~~~

最小花费爬楼梯(动态规划)问题

目录 一题目: 二思路: 三代码: 一题目: 最小花费爬楼梯_牛客题霸_牛客网 二思路: 思路:动态规划找前后规律化简题意:此题想要的结果其实就是能上到顶楼也就是: 分为&#xff1…

信息安全工程师(16)密码学概况

前言 密码学是研究编制密码和破译密码的技术科学,它涵盖了加密技术和解密技术的各个方面,是现代信息安全的核心组成部分。 一、定义与基本概念 定义:密码学是研究如何隐密地传递信息的学科,主要涉及保密通信和数字签名两个方面。它…

4.1章节python中顺序结构

顺序结构(Sequential Structure)是最基本、最简单的程序结构。 顺序结构意味着程序中的语句将按照它们在代码中出现的顺序依次执行。这是大多数编程语言中最直观和自然的执行方式。 在Python中编写顺序结构的程序时,你只需将语句按照你希望它…

docker:docker-compose容器编排

docker-compose容器编排 安装docker-compose 下载链接:https://github.com/docker/compose/releases/下载这个版本 [rootc1-10-66 ~]# ls anaconda-ks.cfg docker-compose-linux-x86_64_2 gpu-burn## 改个名字 [rootc1-10-66 ~]# mv docker-compose-linux-x86…

联想2025届C++开发工程师(编程题AK)

前面20个选择题吧 编程题 T1、爆破 时间限制:3000MS 内存限制:589824KB 题目描述: 小明当起了矿场的爆破工程师。小明工作的矿场可以看作一个N x N的二维网格,小明可以将一个炸弹放置到矿场的任意位置,若干时间后…

更新C语言题目

1.以下程序输出结果是() int main() {int a 1, b 2, c 2, t;while (a < b < c) {t a;a b;b t;c--;}printf("%d %d %d", a, b, c); } 解析:a1 b2 c2 a<b 成立 ,等于一个真值1 1<2 执行循环体 t被赋值为1 a被赋值2 b赋值1 c-- c变成1 a<b 不成立…

CSS——网格布局(display: grid)之下篇

CSS——网格布局&#xff08;display: grid&#xff09;之下篇 前面我们介绍了网格布局的基础的创建以及一些比较基础的属性&#xff0c;下面我们将介绍网格布局的剩余部分&#xff0c;还将结合实例来进行细致的讲解&#xff08;图文并茂&#xff0c;生动形象有内涵&#xff0…

使用现有的科技或许无法实现对人类智能的模拟

现有科技在实现真正的人类智能方面面临许多挑战。科技的局限性涉及许多领域&#xff0c;在计算能力方面&#xff0c;尽管处理速度不断提升&#xff0c;但要模拟人脑的复杂性仍然困难重重&#xff1b;当前的人工智能依赖于大量数据进行训练&#xff0c;缺乏灵活性和适应性&#…

时间序列数据可视化

#时间序列可视化 #离散数据的时间序列可视化 import numpy as np import pandas as pdts pd.Series(np.random.randn(1000), indexpd.date_range(1/1/2000, periods1000)) ts ts.cumsum() ts.plot() #%% #连续数据的时间序列可视化 import matplotlib.pyplot as plt df pd.D…

打印规律图形

思路&#xff1a;将主对角线的1,2,3,4看成一行&#xff0c;5,6,7看成一行&#xff0c;8,9看成一行&#xff0c;10看成一行。按照这种方法&#xff0c;遍历一遍&#xff0c;正好是1~10。 然后在遍历的过程中将这些数存放在数组中。 上图所示&#xff1a;1的坐标为&#xff08;1…

PCL 八叉树的使用

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1构建八叉树 2.1.2可视化函数 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接&#xff1a; PCL点云算法与项目实战案例汇总&#xff08;长期更新&#xff09;…

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-20

计算机前沿技术-人工智能算法-大语言模型-最新论文阅读-2024-09-20 1. Multimodal Fusion with LLMs for Engagement Prediction in Natural Conversation Authors: Cheng Charles Ma, Kevin Hyekang Joo, Alexandria K. Vail, Sunreeta Bhattacharya, Alvaro Fern’andez Ga…

Linux驱动开发初识

Linux驱动开发初识 文章目录 Linux驱动开发初识一、驱动的概念1.1 什么是驱动&#xff1a;1.2 驱动的分类&#xff1a; 二、设备的概念2.1 主设备号&次设备号&#xff1a;2.2 设备号的作用&#xff1a; 三、设备驱动整体调用过程3.1 上层用户操控设备的流程&#xff1a;3.2…

conda 虚拟环境安装GDAL

一. 背景 换了新电脑&#xff0c;要重新安装GDAL。从前是下了GDAL的.wheel文件用pip安装&#xff0c;但平时下轮子的网站现在都打不开&#xff0c;比如https://www.lfd.uci.edu/~gohlke/pythonlibs/#gdal&#xff0c;不晓得为什么。 后面看了这篇教程解决了问题&#xff08;h…

一文说透RTMP、RTSP、RTP、HLS、MPEG-DASH

实时视频传输协议 1. RTMP&#xff08;Real Time Messaging Protocol&#xff09; 简介&#xff1a;RTMP是由Adobe公司开发的实时消息传输协议&#xff0c;主要用于流媒体数据的传输。它基于TCP传输&#xff0c;具有低延迟、高可靠性的特点。特点&#xff1a;RTMP支持多种视频…

gtk安装和测试

linux的图形库有qt和gtk, qt功能强大&#xff0c;但是商用要付费。 gtk是个免费开源的&#xff0c;也不错。现在linux的类似windows办公环境基本是gtk编写的吧&#xff08;我猜&#xff09;。linux下的wps好像是用qt写的。 闲言少序&#xff0c;开始gtk. 先安装&#xff1a; …

北京未来感知科技一文概括(全):UWB定位技术

一、UWB定位技术带给人类社会的进步性#uwb定位# UWB&#xff08;超宽带&#xff09;定位技术作为一项前沿的无线通信技术&#xff0c;以其高精度、实时性、安全性和广泛的应用前景为人类社会的进步带来了显著的影响。随着技术的不断发展和创新应用的不断涌现&#xff0c;UWB定位…