当前位置： 首页 > news >正文

响应式布局（其次）

news 文章来源：https://blog.csdn.net/ldd_eb/article/details/137710857 2024/11/3 4:17:09

响应式布局

  • 一.响应式开发
  • 二.bootstrap前端开发框架
    • 1.原理
    • 2.优点
    • 3.版本问题
    • 4.使用
      • （1）创建文件夹结构
      • （2）创建html骨架结构
      • （3）引入相关样式
      • （4）书写内容
    • 5.布局容器（已经划分好）
  • 三.bootstrap栅格系统
    • 1.原理
    • 2.使用（有行列）
      • （1）参数介绍及使用
      • （2）列嵌套
      • （3）列偏移（offset）
      • （4）列排序（push pull）
  • 三.响应式工具（隐藏和显示）（hidden和visible)

一.响应式开发

原理
在这里插入图片描述
布局容器
在这里插入图片描述
应用
在这里插入图片描述
例子
在这里插入图片描述
代码块

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.container {width: 750px;margin: 0 auto;}.container ul li {float: left;width: 93.75px;height: 30px;background-color: green;}@media screen and (max-width:767px) {.container {width: 100%;}.container ul li {width: 33.33%;}}</style>
</head><body><div class="container"><ul><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li><li>导航栏</li></ul></div>
</body></html>

二.bootstrap前端开发框架

通栏不需要container

1.原理

在这里插入图片描述

2.优点

在这里插入图片描述

3.版本问题

在这里插入图片描述

4.使用

（1）创建文件夹结构

在这里插入图片描述

（2）创建html骨架结构

在这里插入图片描述

（3）引入相关样式

在这里插入图片描述

（4）书写内容

在这里插入图片描述
想要改变样式可以添加类名，覆盖样式
在这里插入图片描述

5.布局容器（已经划分好）

三.bootstrap栅格系统

1.原理

在这里插入图片描述

2.使用（有行列）

（1）参数介绍及使用

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

（2）列嵌套

在这里插入图片描述

（3）列偏移（offset）

在这里插入图片描述

（4）列排序（push pull）

在这里插入图片描述

三.响应式工具（隐藏和显示）（hidden和visible)

在这里插入图片描述

相关文章：

响应式布局（其次）

响应式布局 一.响应式开发二.bootstrap前端开发框架1.原理2.优点3.版本问题4.使用&#xff08;1&#xff09;创建文件夹结构&#xff08;2&#xff09;创建html骨架结构&#xff08;3&#xff09;引入相关样式&#xff08;4&#xff09;书写内容 5.布局容器&#xff08;已经划分…...

编程日记 2024/4/14 3:25:35

arhtas idea plugin 使用手册

arthas idea plugin 使用文档 语雀...

编程日记 2024/4/14 3:24:34

数组算法——查询位置

需求 思路 使用二分查找找到第一个值&#xff0c;以第一个值作为界限&#xff0c;分为左右两个区间在左右两个区间分别使用二分查找找左边的7,&#xff1a;找到中间位置的7之后&#xff0c;将中间位置的7作为结束位置&#xff0c;依次循环查找&#xff0c;知道start>end,返回…...

编程日记 2024/4/14 3:22:31

【解决leecode打不开的问题】使用chrome浏览器和其他浏览器均打不开leecode

问题描述&#xff1a; 能进入leetcode力扣官网但是对某些栏目加载不出来&#xff0c;比如学习栏目能完成加载、题库栏目不能加载。 解决方法一&#xff1a;cookies缓存问题 首先尝试删除浏览器cookie缓存。 因为以下原因&#xff1a; Cookies损坏或过期&#xff1a;有些网站…...

编程日记 2024/4/14 3:20:29

尝试在手机上运行google 最新开源的gpt模型 gemma

Gemma介绍 Gemma简介 Gemma是谷歌于2024年2月21日发布的一系列轻量级、最先进的开放语言模型&#xff0c;使用了与创建Gemini模型相同的研究和技术。由Google DeepMind和Google其他团队共同开发。 Gemma提供两种尺寸的模型权重&#xff1a;2B和7B。每种尺寸都带有经过预训练&a…...

编程日记 2024/4/14 3:15:23

56、巴利亚多利德大学、马德里卡洛斯三世研究所：EEG-Inception-多时间尺度与空间卷积巧妙交叉堆叠，终达SOTA！

本次讲解一下于2020年发表在IEEE TRANSACTIONS ON NEURAL SYSTEMS AND REHABILITATION ENGINEERING上的专门处理EEG信号的EEG-Inception模型&#xff0c;该模型与EEGNet、EEG-ITNet、EEGNex、EEGFBCNet等模型均是专门处理EEG的SOTA。 我看到有很多同学刚入门&#xff0c;不太会…...

编程日记 2024/4/14 3:13:19

ORA-00600: internal error code, arguments: [krbcbp_9]

解决方案 1、清理过期 2、control_file_record_keep_time 修改 恢复时间窗口 RMAN (Recovery Manager) 是 Oracle 数据库的备份和恢复工具。在 RMAN 中&#xff0c;可以使用“恢复窗口”的概念来指定数据库可以恢复到的时间点。这个时间点是基于最近的完整备份或增量备份。 …...

编程日记 2024/4/14 3:12:18

uni-app实现分页--（2）分页加载，首页下拉触底加载更多

业务逻辑如下&#xff1a; api函数升级 定义分页参数类型 组件调用api传参...

编程日记 2024/4/14 3:11:16

前端工程化理解 （2024 面试题）

最好介绍远古世界最好随性一点&#xff0c;不要太刻板 &#xff0c;不然像背书 什么是前端工程化&#xff1f; - 知乎 前端工程化的历史 互联网初期&#xff0c;09 年以前&#xff0c;页面只需要展示一些列表、表格、文章内容以及简单图片即可&#xff0c;其目的是为了传送信…...

编程日记 2024/4/14 3:10:15

10 Php学习：循环

在 PHP 中&#xff0c;提供了下列循环语句&#xff1a; while - 只要指定的条件成立&#xff0c;则循环执行代码块do…while - 首先执行一次代码块&#xff0c;然后在指定的条件成立时重复这个循环for - 循环执行代码块指定的次数foreach - 根据数组中每个元素来循环代码块 当…...

编程日记 2024/4/14 3:09:11

FreeSWITCH 1.10.10 简单图形化界面17 - ubuntu22.04或者debian12 安装FreeSWITCH

FreeSWITCH 1.10.10 简单图形化界面17 - ubuntu22.04或者debian12 安装FreeSWITCH 界面预览00、先看使用手册0、安装操作系统1、下载脚本2、开始安装3、登录网页FreeSWITCH界面安装参考：https://blog.csdn.net/jia198810/article/details/132479324 界面预览 http://myfs.f3…...

编程日记 2024/4/14 3:08:10

ZStack Cloud 5.0.0正式发布——Vhost主存储、隔离PVLAN网络、云平台报警优化、灰度升级增强四大亮点简析

近日&#xff0c;ZStack Cloud 5.0.0正式发布&#xff0c;推出了包含Vhost主存储、隔离PVLAN网络、云平台报警优化、灰度升级增强在内的一系列重要功能。云主机管理、物理机运维、密评合规、灾备服务等诸多使用场景和功能模块均有更新&#xff0c;为您带来更完善的平台服务、更…...

编程日记 2024/4/14 3:04:05

商标没有去注册有哪些不好的影响！

有些商家咨询普推知产老杨&#xff0c;商标没有去注册有哪些不好的影响&#xff0c;其实对企业来说还有许多实际不利的影响&#xff0c;有时代价比注册一个商标要大很多。 想的商标名称没去注册商标&#xff0c;如果别人抢注拿下商标注册证&#xff0c;那就会涉及侵权&#xf…...

编程日记 2024/4/14 3:03:04

【小程序】常用方法、知识点汇总1

欢迎来到《小5讲堂》 这是《小程序》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 前言请求超时Markdown解析逐行显示效果文本变动事件转发…...

编程日记 2024/4/14 2:59:00

AugmentedReality之路-平面检测（5）

本文介绍通过AR检测水平平面和垂直平面&#xff0c;并将检测到的平面转化为Mesh 1、在首页添加功能入口 在首页添加一个按钮&#xff0c;命名为Start World Track 2、自定义ExecStartAREvent 创建ARSessionConfig并取名为ARSessionConfig_World 自定义ExecStartAREvent&…...

编程日记 2024/4/14 2:57:59

MQ:延迟队列

6.1场景&#xff1a; 1.定时发布文章 2.秒杀之后&#xff0c;给30分钟时间进行支付&#xff0c;如果30分钟后&#xff0c;没有支付&#xff0c;订单取消。 3.预约餐厅&#xff0c;提前半个小时发短信通知用户。 A -> 13:00 17:00 16:30 延迟时间&#xff1a; 7*30 * 60 *…...

编程日记 2024/4/14 2:56:58

Element ui 动态展示表格列，动态格式化表格列的值

需求 后台配置前端展示的表格列&#xff0c;遇到比如 文件大小这样的值&#xff0c;如果后台存的是纯数字&#xff0c;需要进行格式化展示&#xff0c;并且能控制显示的小数位数&#xff0c;再比如&#xff0c;部分列值需要加单位等信息&#xff0c;此外还有状态类&#xff0…...

编程日记 2024/4/14 2:55:56

xxl-job调度任务原理解析

xxljob可以对定时任务进行调度&#xff0c;现在看下定时任务调度的过程。XxlJobAdminConfig实现了InitializingBean接口&#xff0c;spring会调用afterPropertiesSet()进行初始化。大致有以下几个过程&#xff1a; admin服务端初始化 JobTriggerPoolHelper.java#toStart()方法…...

编程日记 2024/4/14 2:54:55

实验2 路由器基本配置

实验2 路由器基本配置 一、 原理描述二、 实验目的三、 实验内容四、 实验步骤1.建立实验拓扑2.基础配置3.配置路由器接口IP地址4.查看路由器配置信息5.连通性测试6.使用抓包工具 一、 原理描述 华为设备支持多种配置方式&#xff0c;操作人员要熟悉使用命令行的方式进行设备管…...

编程日记 2024/4/14 2:53:53

docker部署安装整理

centos下安装部署docker 在CentOS下部署Docker&#xff0c;你需要按照以下步骤进行操作&#xff1a; 更新系统&#xff1a; 首先&#xff0c;确保你的CentOS系统是最新的。打开终端&#xff0c;并运行以下命令来更新你的系统&#xff1a; sudo yum update -y安装所需的软件包…...

编程日记 2024/4/14 2:51:52

为什么你明明拥有5年开发经验，但是依然写不出来一份简历？

前端训练营&#xff1a;1v1私教&#xff0c;终身辅导计划&#xff0c;帮你拿到满意的 offer。 已帮助数百位同学拿到了中大厂 offer。欢迎来撩~~~~~~~~ Hello&#xff0c;大家好&#xff0c;我是 Sunday。 在最近不到一年的时间里&#xff0c;我跟上千位同学进行了沟通&#x…...

编程日记 2024/4/14 2:50:51

【ZZULIOJ】1062: 最大公约数（Java）

目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy 提示 code 题目描述 输入两个不大于10的9次方的正整数&#xff0c;输出其最大公约数。 输入 输入两个正整数m和n&#xff0c;数据之间用空格隔开。 输出 输出一个整数&#xff0c;表示m和n的最大公约数。 样…...

编程日记 2024/4/14 2:49:49

北斗导航 | ARAIM算法的原理和性能测试

===================================================== github：https://github.com/MichaelBeechan CSDN：https://blog.csdn.net/u011344545 ===================================================== ARAIM算法的原理和性能测试 针对高级接收机自主完好性监视（ARAIM）算法…...

编程日记 2024/4/14 2:48:48

elasticsearch7安全配置--最低安全等级，用户名密码

上一篇博客在centos7上安装了elasticsearch7 接下来对elasticsearch进行安全方面的配置 minimal security 最低安全等级&#xff0c;用户名密码 首先开启xpack vim config/elasticsearch.yml xpack.security.enabled: true由于我是单机配置的&#xff0c;还加了如下配置 d…...

编程日记 2024/4/14 2:47:47

项目架构MVC，DDD学习

写在前面 本文一起看下项目架构DDD&#xff0c;MVC相关的内容。 1&#xff1a;MVC 不管我们做什么项目&#xff0c;自己想想其实只是做了三件事&#xff0c;如下&#xff1a; 其实&#xff0c;这三件事完全在一个类中做完也可以可以正常把项目完成的&#xff0c;就像下面这…...

编程日记 2024/4/14 2:43:43

SQLite的PRAGMA 声明

PRAGMA 语句是特定于 SQLite 的 SQL 扩展&#xff0c;用于 修改 SQLite 库的操作或查询 SQLite 库 内部&#xff08;非表&#xff09;数据。PRAGMA声明使用相同的 接口作为其他 SQLite 命令&#xff08;例如 SELECT、INSERT&#xff09;但 在以下重要方面有所不同&#xff1a; …...

编程日记 2024/4/14 2:41:41

使用ArrayList.removeAll(List list)导致的机器重启

背景 先说一下背景&#xff0c;博主所在的业务组有一个核心系统&#xff0c;需要同步两个不同数据源给过来的数据到redis中&#xff0c;但是每次同步之前需要过滤掉一部分数据&#xff0c;只存储剩下的数据。每次同步的数据与需要过滤掉的数据量级大概在0-100w的数据不等。 由…...

编程日记 2024/4/14 2:36:36

如何在项目中使用uni-ui组件库

1、安装uni-ui npm i dcloudio/uni-ui 2、组件自动引用 配置easycom 使用 npm 安装好 uni-ui 之后&#xff0c;需要配置 easycom 规则&#xff0c;让 npm 安装的组件支持 easycom 打开项目根目录下的 pages.json 并添加 easycom 节点&#xff1a; // pages.json {"e…...

编程日记 2024/4/14 2:33:33

redis的过期策略和内存淘汰机制（redis篇）

分享并学习一下redis的过期策略和内存淘汰机制 在平时的工作或者学习中&#xff0c;即便自己没有实打实的用过redis。但是能有对这方面的思考&#xff0c;再结合一些实际场景和理论&#xff0c;那么我相信自己或者你都会越来越厉害的。 首先&#xff0c;我们需要认清为啥redis要…...

编程日记 2024/4/14 2:30:25

Java中Runnable和Callable有什么不同？（企业真题）

Java中Runnable和Callable有什么不同&#xff1f; 与之前的方式的对比&#xff1a;与Runnable方式的对比的好处 call()可以有返回值&#xff0c;更灵活 call()可以使用throws的方式处理异常&#xff0c;更灵活 Callable使用了泛型参数&#xff0c;可以指明具体的call()的返回值…...

编程日记 2024/4/14 2:29:22

一个网站服务器多少钱/怎么制作网站平台

题目名称&#xff1a; 陶陶摘苹果 题目描述&#xff1a; 陶陶家的院子里有一棵苹果树&#xff0c;每到秋天树上就会结出10个苹果。苹果成熟的时候&#xff0c;陶陶就会跑去摘苹果。陶陶有个30厘米高的板凳&#xff0c;当她不能直接用手摘到苹果的时候&#xff0c;就会踩到板…...

编程日记 2024/11/3 2:53:59

网站建设乚金手指花总15/郑州网站优化seo

作者&#xff1a;余蒙 在实现一个Android的WEB服务客户端&#xff0c;比如微博&#xff0c;论坛客户端时&#xff0c;经常会使用到图片的上传和下载。在这里介绍如何利用HttpClient实现图片的上传和下载功能。 1 图片上传&#xff1a;上传图片时&#xff0c;首先获得图片的路径…...

编程日记 2024/11/3 2:20:20

做公司网站的好处/搜索引擎排名查询

一&#xff1a;原理&#xff1a; linux操作系统下双网卡绑定有七种模式。现在一般的企业都会使用双网卡接入&#xff0c;这样既能添加网络带宽&#xff0c;同时又能做相应的冗余&#xff0c;可以说是好处多多。而一般企业都会使用linux操作系统下自带的网卡绑定模式&#xff0c…...

编程日记 2024/11/2 23:36:18

那个网站教做仙芋鲜/中国域名注册官网

转载&#xff1a;https://www.cnblogs.com/gavanwanggw/p/6743774.html MFC中获取各个窗口之间的句柄或者指针对象的方法 MFC在非常多的对话框操作中,我们常常要用到在一个对话框中调用还有一个对话框的函数或变量.能够用例如以下方法来解决. HWND hWnd::FindWindow(NULL,_T…...

编程日记 2024/11/2 22:03:43

客户关系管理的定义/网站seo思路

http://blog.csdn.net/libing403/article/details/73158972我们要讨论3个问题&#xff1a;fseek()和ftell()函数的工作原理、如何使用二进制流、如何让程序可移植。fseek()与ftell()的工作原理头文件&#xff1a;#include定义函数&#xff1a;intfseek(FILE * stream, long off…...

编程日记 2024/11/2 21:49:33

手機如何做网站/cms自助建站系统

实验目录1.继承2.面向抽象编程13.面向抽象编程24.子类方法重写5.面向抽象编程6.接口本次作业共六题&#xff0c;一共五个包&#xff0c;包名即题号&#xff0c;其中第二题和第三题都写在第二题的包中。1.继承 在一个源程序中&#xff0c;定义四个类&#xff1a; 第一个类是图形…...

编程日记 2024/11/2 21:38:41