前端Web移动端学习day05

移动 Web 第五天

响应式布局方案

  • 媒体查询
  • Bootstrap框架

响应式网页指的是一套代码适配多端，一套代码适配各种大小的屏幕。

共有两种方案可以实现响应式网页，一种是媒体查询，另一种是使用bootstrap框架。

01-媒体查询

基本写法

在这里插入图片描述

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

max-width: 786px 这一段代码如果成为 @media 的条件会在页面的宽度小于 786px 的时候让@media 中的代码生效。

同理，min-width:786px 会在屏幕的宽度大于 786px 的时候让里面的代码生效。

如果实在不太好理解就借助数轴的方式来辅助，到底使用 max-width 还是 min-width。

书写顺序

  • min-width（从小到大）指的是@medai中的的视口宽度需要从上到下，从小到大写
  • max-width（从大到小）指的是@medai 中的的视口宽度需要从上到下，从大到小写

如果不按照这种顺序写，可能会出现css样式层叠，导致前面的样式不生效。

案例-左侧隐藏

需求：网页宽度小于等于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; /* 让右边的main盒子占整个父盒子剩下的全部 *//* 这样写的效果是左边left盒子的大小生效了，右边main盒子只占整个父盒子剩下的全部 */height: 500px;background-color: skyblue;
}@media (max-width: 768px) {.left {display: none;}
}

媒体查询-完整写法

在这里插入图片描述

关键词 / 逻辑操作符
  • and
  • only
  • not

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

特性名称属性值
视口的宽和高width、height数值
视口最大宽或高max-width、max-height数值
视口最小宽或高min-width、min-height数值
屏幕方向orientationportrait: 竖屏landscape:横屏

工作中一般常用的是是空的宽度这一个特性

媒体类型

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

  • screen：屏幕设备
  • 打印预览：print
  • 阅读器：speech
  • 不区分类型：all
媒体特性
  • 视口宽高：width / height
  • 视口最大宽高：max-width ；max-height
  • 视口最小宽高：min-width；min-height
  • 屏幕方向：orientation
    • protrait：竖屏
    • landscape：横屏

媒体查询-外部CSS

如果将媒体查询全都写到一个页面中，会发现需要在一个媒体查询里面写很多的代码，这种比较麻烦，于是就有了直接在link的时候在link标签上添加媒体查询，这样简化代码。具体的写法如下：在link标签中，属性名：属性值，不需要加 @。

逻辑符，媒体类型，and，这些一般可以省略，在需要的时候在写，但是(媒体查询) 不可以省略，尤其是括号更加不能省略。

在这里插入图片描述

02-Bootstrap

简介

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

中文官网: https://www.bootcss.com/

使用步骤

下载

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

在这里插入图片描述

下载之后是一个压缩包，解压之后文件夹中会有css和js文件夹，css文件夹中有一大堆css文件，可以使用的是bootstrap.css和bootstrap.min.css这两个文件虽然名字不同但是功能是相同的。

这两个文件的区别：bootstrap.css是没有压缩过的文件，文件体积和bootstrap.css相比稍微大一点，里面的内容和平常的写代码习惯是相同的，bootstarp.min.css是经过压缩的文件，里面的代码是没有格式的。

以后再工作中需要哪一个就之间将对应的文件复制到项目的文件夹中就行了。映入bootstrap.css或者bootstrap.min.css其他文件不用引入。

使用
  1. 引入 Bootstrap CSS 文件
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
  1. 调用类名： container 响应式布局版心类
<div class="container">测试</div>

栅格系统

作用：响应式布局

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

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

在这里插入图片描述

xs表示小于576，大部分是手机。

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

代码如下：

<!--
视口宽度大于等于1200px，一行排4个盒子→3	添加类 .col-xl-数字
视口宽度大于等于768px，一行排2个盒子		添加类 .col-md-数字
视口宽度大于等于576px，一行排1个盒子		添加类 .col-sm-数字
后面的数字指的是一个盒子在父盒子中占有多少份，比如说 .col-sm-6 表示添加这个类的盒子当窗口的大小大于576px时在父盒子中占6份
注意：如果想要添加 .col-xx-x 这个类，其父盒子必须添加 .row 类，来开启flex布局，注意 .col-xx-x 这种类也是有样式的层叠性的如果使用了多个这种类必须要注意类名的排列顺序，
-->
<!--版心→row →子级-->
<div class="container"> // 添加container类，让盒子实现响应式布局<div class="row"> // 添加row类，让这个盒子中的子盒子可以排列在一行<div class="col-xl-3 col-md-6 col-sm-12">1</div><div class="col-xl-3 col-md-6 col-sm-12">2</div><div class="col-xl-3 col-md-6 col-sm-12">3</div><div class="col-xl-3 col-md-6 col-sm-12">4</div></div>
</div>

全局样式

在开发中最好是就着官方的文档使用，如果比较熟练也可以不使用官方的文档。

按钮

在这里插入图片描述

button类名

  • btn：默认样式清除默认的样式，比如：背景色，边框线
  • btn-success：成功
  • btn-warning：警告
  • ……
  • 按钮尺寸：btn-lg / btn-sm
<button class="btn btn-success btn-sm">按钮1</button> 
// btn 只是消除了默认的样式，如果需要添加其他的样式需要使用其他的类名，比如：btn-success
<button class="btn btn-warning btn-lg">按钮2</button>
表格

在这里插入图片描述

表格类：

  • table：默认样式，清除table默认的样式，同时添加了一点自己的样式。
  • table-striped：隔行变色
  • table-success：表格颜色 既可以给table添加，也可以给tr添加。
  • ……

组件

1.引入样式表，适当的修改

2.引入 js 文件，有些动态的组件是需要映入bootstrap的js文件的

3.复制结构，修改内容

实例代码：4

<nav class="navbar navbar-expand-lg bg-body-tertiary"><div class="container-fluid"><a class="navbar-brand" href="#">Navbar</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="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Features</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li></ul></div></div>
</nav>

bootstrap是支持自己修改对应的样式的，方法就是，直接层叠掉对应的样式就行。具体的操作方式是：先打开html页面，按F12检查页面，选择到想要修改的元素，将元素对应的样式前面的勾选勾掉，看看样式是否发生变化，如果变了那就说明这就是想要修改的样式，只需要在自己的css文件中，添加对应的类名，然后修改对应的样式，注意有时候样式后面加了 !importent ，这时候自己的类名中也需要添加 !importent，否则会因为权重不够，样式不生效的。

注意：有时候自己在添加或者删除复制的html标签的时候，一定要注意，原本的html结构，比如说给标签添加的自定义属性之类的。

字体图标

下载

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

下载的压缩包中包括了非常多的svg图片和一个font文件夹，到时候只需要将font文件夹复制到项目的font文件夹中去就行了。

对了，如果使用了bootstrap库，可以在项目中直接创建一个bootstarp文件夹，到时候属于bootstrap库的文件全都放入这里就行了，比如说：bootstrap的css文件可以直接放在这个文件夹下，而不放入专门的单独的css文件夹下，bootstrap的font文件夹也可以直接放入这个bootstrap文件夹下，bootstrap的js文件也可以放在bootstrap的文件夹下的js文件夹下。

使用

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

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

  3. 调用 CSS 类名（图标对应的类名），调用的图标需要到官网上去看对应的图标的名字，

    注意：官网上的图标的名称只是对应的字体图标类的一部分，比如说：有一个android2名称的类名，真正使用这个图标的时候使用的完整类名是 bi-androidq2，如果是其他的官网的字体图标也是相同的道方式，直接使用 bi-对应的名称 。

<i class="bi-android2"></i> // 官网上的字体图标实例使用了两个类名，但是实际的使用只需要添加一个类名就行了

注意：bootstrap的字体图标只需要使用一个类名，而普通的字体图标需要使用两个类名。

注意：官网的字体图标也是支持自定义样式的，只需要用css的样式层叠掉就行。具体的实例如下：

// 还是以android2为例
.bi-android2 {font-size: 100px;color: green;
}

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.hqwc.cn/news/572606.html

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

相关文章

day70 Mybatis使用mapper重构xml文件重新修改商品管理系统

day70 Mybatis使用mapper重构xml文件重新修改商品管理系统

day67 基于mysql数据库jdbcDruidjar包连接的商品管理用户购物系统-CSDN博客 1多表操作 2动态SQL 项目中使用的为商品管理系统的表 一 查询商品信息 编号&#xff0c;名称&#xff0c;单价&#xff0c;库存&#xff0c;类别 1表&#xff1a;商品表&#xff0c;类别表 n对1…
阅读更多...
MySQL—存储引擎和索引

MySQL—存储引擎和索引

MySQL进阶 1. 存储引擎1.1 体系结构1.2 存储引擎1.3 存储引擎特点1.3.1 InnoDB1.3.2 MyISAM1.3.3 Memory1.3.4 区别及特点 1.4 存储引擎选择 2. 索引2.1 概述2.2 索引结构2.2.1 概述2.2.2 二叉树2.2.3 B-Tree2.2.4 BTree2.2.5 Hash 2.3 索引分类2.3.1 索引分类2.3.2 聚集索引&a…
阅读更多...
Axure中后台系统原型模板，B端页面设计实例，高保真高交互54页

Axure中后台系统原型模板，B端页面设计实例，高保真高交互54页

作品概况 页面数量&#xff1a;共 50 页&#xff08;长期更新&#xff09; 兼容版本&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;网页模板、网站后台、中台系统、B端系统 作品特色 本品为「web中后台系统页面设计实例模板」&#xff0c;默林原创…
阅读更多...
libVLC 视频抓图

libVLC 视频抓图

Windows操作系统提供了多种便捷的截图方式&#xff0c;常见的有以下几种&#xff1a; 全屏截图&#xff1a;通过按下PrtSc键&#xff08;Print Screen&#xff09;&#xff0c;可以截取整个屏幕的内容。截取的图像会保存在剪贴板中&#xff0c;可以通过CtrlV粘贴到图片编辑工具…
阅读更多...
律甲法务OA平台：信鸥科技引领法律行业新篇章

律甲法务OA平台：信鸥科技引领法律行业新篇章

随着信息技术的飞速发展&#xff0c;法律行业也迎来了数字化转型的重要时刻。在这个信息化、智能化的时代&#xff0c;如何运用科技手段提升法律服务的质量和效率&#xff0c;成为法律行业亟待解决的问题。信鸥科技&#xff0c;作为业界的佼佼者&#xff0c;凭借其深厚的技术积…
阅读更多...
【数据库管理操作】Mysql 创建学生数据库及对数据表进行修改

【数据库管理操作】Mysql 创建学生数据库及对数据表进行修改

MySQL 创建学生成绩数据库 1.创建数据库 create database studentscore;创建完成之后&#xff0c;如果需要使用该数据&#xff0c;使用use命令 use studentscore;创建表前查看当前数据库中包含的表 show tables; 2.创建bclass表 create table bclass( class_id char(8) …
阅读更多...
数据结构——优先级队列

数据结构——优先级队列

一、优先级队列的定义和存储 优先级队列定义&#xff1a;优先级高的元素在队头&#xff0c;优先级低的元素在队尾 基于普通线性表实现优先级队列&#xff0c;入队和出队中必有一个时间复杂度O(n),基于二叉树结构实现优先级队列&#xff0c;能够让入队和出队时间复杂度都为O(log…
阅读更多...
如何使用Python结合Pillow、matplotlib和OpenCV实现图片读取

如何使用Python结合Pillow、matplotlib和OpenCV实现图片读取

使用Pillow库 matplotlib是一个绘图库&#xff0c;经常用于数据可视化&#xff0c;但它也可以用来展示图片。 from PIL import Image# 读取图片 image Image.open(.jpg)# 展示图片 image.show()使用OpenCV库 OpenCV是一个强大的计算机视觉和机器学习库。它不仅提供了大量的图像…
阅读更多...
Spring boot2.X 配置https

Spring boot2.X 配置https

背景 最近项目组说要将 http 升级成 https 访问&#xff0c;证书也给到我们这边了&#xff0c;当然我们这边用的是个二级域名&#xff0c;采用的是通配符访问的方式&#xff0c;比如一级域名是这样&#xff08;com.chinaunicom.cn&#xff09;&#xff0c;我们的则是&#xff0…
阅读更多...
勾八头歌之分类回归聚类

勾八头歌之分类回归聚类

一、机器学习概述 第1关机器学习概述 B AD B BC 第2关常见分类算法 #编码方式encodingutf8from sklearn.neighbors import KNeighborsClassifierdef knn(train_data,train_label,test_data):input:train_data用来训练的数据train_label用来训练的标签test_data用来测试的数据…
阅读更多...
Hadoop+Spark大数据技术 第三次作业

Hadoop+Spark大数据技术 第三次作业

第三次作业 1.简述HDFS Shell三种操作命令hadoop fs、hadoop dfs、hdfs dfs的异同点。 相同点 用于与 Hadoop 分布式文件系统&#xff08;HDFS&#xff09;交互。可以执行各种文件系统操作&#xff0c;如文件复制、删除、移动等。 不同点 hadoop fs、hadoop dfs已弃用&#xf…
阅读更多...
循环神经网络（RNN）：处理序列数据的利器

循环神经网络（RNN）：处理序列数据的利器

目录 1. 引言 2.RNN原理与时间步展开 3.LSTM与GRU工作机制与优势 3.1.LSTM&#xff08;Long Short-Term Memory&#xff09; 3.2.GRU&#xff08;Gated Recurrent Unit&#xff09; 4.应用案例 4.1文本生成 4.2情感分析 5.总结 1. 引言 循环神经网络&#xff08;Recurr…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023