前端移动高级web详细解析五

响应式布局方案

  • 媒体查询

  • Bootstrap框架

01-媒体查询

基本写法

  • max-width：最大宽度（小于等于）

  • min-width：最小宽度（大于等于）

书写顺序

  • min-width（从小到大）

  • max-width（从大到小）

案例-左侧隐藏

需求：网页宽度小于等于768px则隐藏左侧区域

  • HTML 结构

<div class="box"><div class="left">left</div><div class="main">响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果</div>
</div>

  • CSS 样式

.box {display: flex;
}
​
.left {width: 300px;height: 500px;background-color: pink;
}
​
.main {flex: 1;height: 500px;background-color: skyblue;
}
​
@media (max-width: 768px) {.left {display: none;}
}

媒体查询-完整写法

关键词 / 逻辑操作符

  • and

  • only

  • not

媒体类型

媒体类型用来区分设备类型

  • screen：屏幕设备

  • 打印预览：print

  • 阅读器：speech

  • 不区分类型：all

媒体特性

  • 视口宽高：width / height

  • 视口最大宽高：max-width ；max-height

  • 视口最小宽高：min-width；min-height

  • 屏幕方向：orientation

    • protrait：竖屏

    • landscape：横屏

媒体查询-外部CSS

02-Bootstrap

简介

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: Bootstrap中文网

使用步骤

下载

下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件

使用

  1. 引入 Bootstrap CSS 文件

<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">

  1. 调用类名： container 响应式布局版心类

<div class="container">测试</div>

栅格系统

作用：响应式布局

栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数

例如：一行排4个盒子，则每个盒子占 3份 即可（12 / 4 = 3）

  • row 类：行，可以让内容在一行排（flex布局）

全局样式

按钮

类名

  • btn：默认样式

  • btn-success：成功

  • btn-warning：警告

  • ……

  • 按钮尺寸：btn-lg / btn-sm

表格

表格类：

  • table：默认样式

  • table-striped：隔行变色

  • table-success：表格颜色

  • ……

组件

1.引入样式表

2.引入 js 文件

3.复制结构，修改内容

字体图标

下载

导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip

使用

  1. 复制 fonts 文件夹到项目目录

  2. 网页引入 bootstrap-icons.css 文件

  3. 调用 CSS 类名（图标对应的类名）

<i class="bi-android2"></i>

03-综合案例-alloyTeam

准备工作

  • HTML 结构

<title>腾讯全端</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- 层叠性：咱们的css 要 层叠 框架的 -->
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
<link rel="stylesheet" href="./css/index.css">
​
​
​
<script src="./Bootstrap/js/bootstrap.min.js"></script>

  • less 样式

// out: ../css/

头部导航

  • HTML 结构

<!-- 导航 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top"><div class="container"><a class="navbar-brand" href="#"><img src="./assets/images/logo.png" alt=""></a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link active" aria-current="page" href="#">首页</a></li><li class="nav-item"><a class="nav-link" href="#">博客</a></li><li class="nav-item"><a class="nav-link" href="#">Github</a></li><li class="nav-item"><a class="nav-link" href="#">TWeb Conf</a></li><li class="nav-item"><a class="nav-link" href="#">SuperStar</a></li><li class="nav-item"><a class="nav-link" href="#">Web前端导航</a></li><li class="nav-item"><a class="nav-link" href="#">关于</a></li></ul></div></div>
</nav>

  • less 样式

// 导航
.bg-body-tertiary {background-color: transparent !important;.navbar-collapse {flex-grow: 0;}
}

轮播图图片

  • HTML 结构

<!-- 轮播图 -->
<div id="carouselExampleIndicators" class="carousel slide"><div class="carousel-indicators"><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button><button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button></div><div class="carousel-inner"><div class="carousel-item active"></div><div class="carousel-item"></div><div class="carousel-item"></div><div class="carousel-item"></div></div><button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span></button><button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span></button>
</div>

  • less 样式

.carousel {.carousel-item {height: 500px;background-size: cover;background-position: center 0;}.carousel-item:nth-child(1) {background-image: url(../assets/uploads/banner_1.jpg);}.carousel-item:nth-child(2) {background-image: url(../assets/uploads/banner_2.jpg);}.carousel-item:nth-child(3) {background-image: url(../assets/uploads/banner_3.jpg);}.carousel-item:nth-child(4) {background-image: url(../assets/uploads/banner_4.jpg);}
}

轮播图响应式

  • less 样式

// 轮播图: 小于768图片高度250 max；大于等于768图片高度400 min；大于等于992图片高度500
.carousel {// 响应式 → 媒体查询@media (max-width: 768px) {.carousel-item {height: 250px;}}
​@media (min-width: 768px) {.carousel-item {height: 400px;}}@media (min-width: 992px) {.carousel-item {height: 500px;}}
​
​.carousel-item {// height: 500px;background-size: cover;background-position: center 0;}
}

开源项目响应式

  • HTML 结构

<!-- 开源项目 -->
<div class="project container"><div class="title"><h2>OpenSource / 开源项目</h2><p>种类众多的开源项目，让你爱不释手</p></div><div class="content"><div class="row"><div class="col-lg-3 col-md-6">1</div><div class="col-lg-3 col-md-6">2</div><div class="col-lg-3 col-md-6">3</div><div class="col-lg-3 col-md-6">4</div></div></div>
</div>

  • less 样式

// 开源项目
// 视口宽度大于992；一行排4个盒子  col-lg-3
// 视口宽度大于768；一行排2个盒子  col-md-6
.project {margin-top: 60px;text-align: center;
}

开源项目内容布局

  • HTML 结构

<!-- 开源项目 -->
<div class="project container"><div class="title"><h2>OpenSource / 开源项目</h2><p>种类众多的开源项目，让你爱不释手</p></div><div class="content"><div class="row"><div class="col-lg-3 col-md-6"><a href="#">1</a></div><div class="col-lg-3 col-md-6"><a href="#">1</a></div><div class="col-lg-3 col-md-6"><a href="#">1</a></div><div class="col-lg-3 col-md-6"><a href="#">1</a></div></div></div>
</div>

  • less 样式

.project {margin-top: 60px;text-align: center;.row {div {margin-bottom: 10px;height: 200px;// background-color: pink;a {// 块级的宽度和父级一样大display: block;height: 200px;background-color: green;border-radius: 4px;}
​&:nth-child(1) a {background-color: #70c3ff;}&:nth-child(2) a {background-color: #fd6a7f;}&:nth-child(3) a {background-color: #7f8ea0;}&:nth-child(4) a {background-color: #89d04f;}}}
}

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

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

相关文章

MySQL数据库入门到精通——运维篇（1）

MySQL数据库入门到精通——运维篇（1）

MySQL数据库入门到精通——运维篇&#xff08;1&#xff09; 1. 日志1.1 错误日志1.2 二进制日志1.3 查询日志1.4 慢查询日志 2. 主从复制2.1 主从复制的概述2.2 主从复制的原理2.3 主从复制的搭建2.3.1 服务器准备2.3.2 主库配置2.3.3 从库配置2.3.4 测试 1. 日志 在任何一种…
阅读更多...
python实现MC协议（SLMP 3E帧）的TCP服务端（篇一）

python实现MC协议（SLMP 3E帧）的TCP服务端（篇一）

python实现MC协议&#xff08;SLMP 3E帧&#xff09;的TCP服务端是一件稍微麻烦点的事情。它不像modbusTCP那样&#xff0c;可以使用现成的pymodbus模块去实现。但是&#xff0c;我们可以根据协议帧进行组包&#xff0c;自己去实现帧的格式&#xff0c;而这一切可以基于socket模…
阅读更多...
记录 vue + vuetify + electron 安装过程

记录 vue + vuetify + electron 安装过程

NodeJs 版本&#xff1a; 20 内容来自&#xff1a; Electron Vue.js Vuetify 构建跨平台应用_思月行云的博客-CSDN博客文章浏览阅读61次。Go coding!https://blog.csdn.net/kenkao/article/details/132600542 npm config set registry https://registry.npm.taobao.org np…
阅读更多...
【c++|opencv】二、灰度变换和空间滤波---2.直方图和均衡化

【c++|opencv】二、灰度变换和空间滤波---2.直方图和均衡化

every blog every motto: You can do more than you think. https://blog.csdn.net/weixin_39190382?typeblog 0. 前言 图像直方图、直方图均衡化 1. 图像直方图 #include <iostream> #include <opencv2/opencv.hpp>using namespace cv; using namespace std;…
阅读更多...
Android NDK开发详解之调试和性能分析的系统跟踪概览

Android NDK开发详解之调试和性能分析的系统跟踪概览

Android NDK开发详解之调试和性能分析的系统跟踪概览 系统跟踪指南 “系统跟踪”就是记录短时间内的设备活动。系统跟踪会生成跟踪文件&#xff0c;该文件可用于生成系统报告。此报告有助于您了解如何最有效地提升应用或游戏的性能。 有关进行跟踪和性能分析的全面介绍&#x…
阅读更多...
groovy下载与安装

groovy下载与安装

Groovy是一种基于JVM&#xff08;Java虚拟机&#xff09;的敏捷开发语言&#xff0c;它结合了Python、Ruby和Smalltalk的许多强大的特性&#xff0c;Groovy 代码能够与 Java 代码很好地结合&#xff0c;也能用于扩展现有代码。由于其运行在 JVM 上的特性&#xff0c;Groovy也可…
阅读更多...
Servlet 初始化参数（web.xml和@WebServlet）

Servlet 初始化参数（web.xml和@WebServlet）

1、通过web.xml方式 <?xml version"1.0" encoding"UTF-8"?> <web-app xmlns"http://xmlns.jcp.org/xml/ns/javaee"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://xmlns.jcp.org/xm…
阅读更多...
3-性能分析-android-基于Choreographer渲染机制详解

3-性能分析-android-基于Choreographer渲染机制详解

3-性能分析-android-基于Choreographer渲染机制详解 一：主线程运行机制的本质1> 引入 Vsync 之前2> 引入 Choreographer二： Choreographer 简介1> 从 Systrace 的角度来看 Choreogrepher 的工作流程2> Choreographer 的工作流程三：Choreographer 处理一帧的逻辑…
阅读更多...
mysql---索引

mysql---索引

概要 索引&#xff1a;排序的列表&#xff0c;列表当中存储的是索引的值和包含这个值的数据所在的行的物理地址 作用&#xff1a;加快查找速度 注&#xff1a;索引要在创建表时尽量创建完全&#xff0c;后期添加影响变动大。 索引也需要占用磁盘空间&#xff0c;innodb表数据…
阅读更多...
科技战再次升级！国内前沿科技行业影响悬而未决

科技战再次升级！国内前沿科技行业影响悬而未决

&#xff08;图片来源&#xff1a;网络&#xff09; 美国与中国的科技贸易战正在升级&#xff0c;美国总统拜登发布行政命令限制美国对半导体和微电子、量子信息技术和人工智能等特定行业的跨国投资。在此前美国对中国芯片相关出口的一系列限制之后&#xff0c;又增加了此项新…
阅读更多...
每日一题(LeetCode)----二分查找（三）

每日一题(LeetCode)----二分查找（三）

每日一题(LeetCode)----二分查找&#xff08;三&#xff09; 1.题目&#xff08;69. x 的平方根 &#xff09; 给你一个非负整数 x &#xff0c;计算并返回 x 的 算术平方根 。 由于返回类型是整数&#xff0c;结果只保留 整数部分 &#xff0c;小数部分将被 舍去 。 **注意…
阅读更多...
服务器数据恢复-VSAN环境下ESXI虚拟机无法访问的数据恢复方案

服务器数据恢复-VSAN环境下ESXI虚拟机无法访问的数据恢复方案

一、用户信息&#xff1a; 广东某单位 二、数据恢复环境&#xff1a; 主机操作系统&#xff1a;ESXI 分区类型&#xff1a;VSAN 存储介质清单 &#xff1a;一共8台服务器节点&#xff0c;每节点2个磁盘组&#xff0c;其中1个磁盘组配置1块SSD固态硬盘&#xff0c;4块1.2T机…
阅读更多...
【Linux】第七站：vim的使用以及配置

【Linux】第七站：vim的使用以及配置

文章目录 一、vim1.vim的介绍2.vim基本使用3.vim的命令模式常用命令4.底行模式 二、vim的配置 一、vim 1.vim的介绍 vim编辑器&#xff0c;用来文本编写&#xff0c;可以写代码 它是一个多模式的编辑器 它有很多的模&#xff0c;不过我们暂时先只考虑这三种模式 命令模式插入模…
阅读更多...
【ES专题】ElasticSearch快速入门

【ES专题】ElasticSearch快速入门

目录 前言从一个【搜索】说起 阅读对象阅读导航笔记正文一、全文检索1.1 什么是【全文检索】1.2 【全文检索】原理1.3 什么是倒排索引 二、ElasticSearch简介2.1 ElasticSearch介绍2.2 ElasticSearch应用场景2.3 数据库横向对比 三、ElasticSearch环境搭建3.1 Windows下安装3.2…
阅读更多...
VueX环境的搭建

VueX环境的搭建

一、安装VueX npm i vuex // Vue3安装该版本 npm i vuex3 // Vue2安装该版本 因为我使用的是Vue2&#xff0c;所以安装的是3版本 二、配置VueX文件 在src目录下创建store文件夹&#xff0c;再创建index.js 在index.js中配置如下代码&#xff1a; // VueX配置文件/…
阅读更多...
Linux shell编程学习笔记17：for循环语句

Linux shell编程学习笔记17：for循环语句

Linux Shell 脚本编程和其他编程语言一样&#xff0c;支持算数、关系、布尔、字符串、文件测试等多种运算&#xff0c;同样也需要进行根据条件进行流程控制&#xff0c;提供了if、for、while、until等语句。 之前我们探讨了if语句&#xff0c;现在我们来探讨for循环语句。 Li…
阅读更多...
优先队列----数据结构

优先队列----数据结构

概念 不知道你玩过英雄联盟吗&#xff1f;英雄联盟里面的防御塔会攻击离自己最近的小兵&#xff0c;但是如果有炮车兵在塔内&#xff0c;防御塔会优先攻击炮车&#xff08;因为炮车的威胁性更大&#xff09;&#xff0c;只有没有兵线在塔内时&#xff0c;防御塔才会攻击英雄。…
阅读更多...
实在智能携手品牌商家，在活动会面中共谋发展

实在智能携手品牌商家，在活动会面中共谋发展

金秋十月&#xff0c;丰收的季节&#xff0c;也是商家们在双11大展拳脚的时刻。为迎战一年一度的双11大促&#xff0c;品牌商家在10月份卯足劲&#xff0c;制定一系列营销方案&#xff0c;争取为店铺带来更多流量和订单。 其中&#xff0c;舍得、同科医药、梅子熟了、宝洁、维…
阅读更多...
回归预测 | Matlab实现RIME-CNN-SVM霜冰优化算法优化卷积神经网络-支持向量机的多变量回归预测

回归预测 | Matlab实现RIME-CNN-SVM霜冰优化算法优化卷积神经网络-支持向量机的多变量回归预测

回归预测 | Matlab实现RIME-CNN-SVM霜冰优化算法优化卷积神经网络-支持向量机的多变量回归预测 目录 回归预测 | Matlab实现RIME-CNN-SVM霜冰优化算法优化卷积神经网络-支持向量机的多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.RIME-CNN-SVM霜冰优化算…
阅读更多...
大坝水库安全监测终端MCU，智能化管理的新篇章！

大坝水库安全监测终端MCU，智能化管理的新篇章！

我国目前拥有超过9.8万座水库大坝&#xff0c;其中超过95%为土石坝&#xff0c;这些大坝主要是在上世纪80年代以前建造的。这些水库大坝在保障防洪、发电、供水、灌溉等方面发挥了巨大的作用&#xff0c;但是同时也存在一定的安全风险&#xff0c;比如坝体结构破损、坝基渗漏、…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023