移动Web学习08-响应式布局bootstrap的使用

2、响应式布局

2.1、什么响应式布局

响应式布局是一种网页设计的方法，能够使网站在不同的设备上（如桌面电脑、平板电脑、手机等）呈现出最佳的用户体验。其核心思想是使网页能够根据用户的设备和屏幕尺寸自动调整布局和内容，以适应不同的屏幕大小和分辨率。

根据获取屏幕的宽度、调整页面布局、其核心就是利用媒体查询、让对应的css生效、来达到响应式的效果

例如 https://alloyteam.com/ 腾讯全端这个网站、他只有一个页面、在不同设备下、进行来回的相应。

市面上如京东、淘宝、他们都是有两个团队、开发了两套页面，其目的是、给与用户更好的体验。但是非常的耗费开发成本。

2.2、媒体查询

我们实现响应式布局的核心就是采用媒体查询动态的监听、我们视口的宽度，来达到响应式的效果

前面讲移动端适配的时候我们学习过了媒体查询，只不过当时我们写的都是固定的值，如下

@media(width:1000px){body{background-color:pink}
}

缺点是，我正好是1000的时候变化，或者800的时候变化、那八百到1000怎么办？

我们能不能写一个范围值

开发当中的常用写法 max-width 最大宽度 / min-width 最小宽度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* @media (width:1000px) {body{background-color: pink;}} *//* 视口宽度小于等于768px,网页颜色为绿色 d最大是768px */@media(max-width:768px){body{background-color: pink;}}/* 视口的宽度大于等于1200，网页颜色为红色 */@media(min-width:1200px){body{background-color: red;}}</style>
</head>
<body><!-- 小于等于用max-width  大于等于用min-width -->
</body>
</html>

2.3、媒体查询的顺序问题

同时满足两个、后写的的样式层叠掉写先写的样式、比如、1300满足大于1200、也满足大于900，因为900这个是后写的所以1200设置的这个媒体查询不会生效

写min-width 从小到大、写max-width 从大到小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 如果我们，我们先设置了最小宽度是red,就是小于等于1200w往下的都是红色，你会发现，red没了，假如你宽度为900，他满足大于等于1200，有满足，大于等于992， 原因是样式层叠了*//* 视口宽度>=1200px 背景颜色为红色 */@media(min-width:1200px){body{background-color: red;}}/* 视口宽度<768px  背景颜色为黄色  */@media(max-width:768px){body{background-color: yellow;}}/* 视口宽度>=768px  背景颜色为粉色 */@media(min-width:768px){body{background-color: pink;}}/* 视口宽度>=992px  背景颜色为蓝色 */@media(min-width:992px){body{background-color: blue;}}</style>
</head>
<body></body>
</html>

2.4、媒体查询完整写法

@media mediatype and|not|only (media feature){css-code;
}

关键词

and：用于将多个媒体查询规则组合成单条媒体查询

not：用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。

only：仅在整个查询匹配时才用于应用样式。

, (逗号)：逗号用于将多个媒体查询合并为一个规则。

<style>/*比如下面表示：屏幕宽度大于500，小于700的时候，body背景颜色为红色；*/@media (min-width: 500px) and (max-width: 800px) {body {background-color: orange;}}
</style>

媒体类型

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

image-20240420022133730

媒体特征

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

image-20240420022203281

2.5、外链式媒体查询

格式：

<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css">

例子：

<link rel="stylesheet" href="./one" media="screen and (min-width:992px)">
<link rel="stylesheet" href="./one" media="screen and (min-width:120px)">

媒体查询通常配合rem来使用

2.6、京东盒子隐藏案例

image-20240420122018979

<!DOCTYPE html>
<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;}.box{width: 1190px;height: 480px;background-color: pink;margin: 0 auto;display: flex;justify-content: space-between;margin-top: 100px;}.a1{width: 190px;height: 480px;background-color: yellow;}.a2{width: 590px;height: 480px;background-color: skyblue;}.a3{width: 190px;height: 480px;background: purple;}.a4{width: 190px;height: 480px;background-color: red;}/* 小于等于1348px时，我们就让a3这个盒子消失 */@media (max-width: 1348px) {.a3{display: none;}.box{width: 990px;}}</style>
</head>
<body><div class="box"><div class="a1"></div><div class="a2"></div><div class="a3"></div><div class="a4"></div></div>
</body>
</html>

2.7、bootstrap概述

1、UI框架的基本概念

什么是UI框架

将常见效果进行统一封装后形成的一套代码，例如：BootStrap

UI框架的作用

基于框架开发，效率高、稳定性高

BootStrap的作用

主要是做我们响应式网站的开发

2、Bootstrap简介

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

及常见的交互效果

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

现在的Bootstrap已经出到第五个版本了，但是我们一般用的话还是用Bootstrap5，原因是他比较稳定

3、Bootstrap下载

image-20240420124543624

生产环境用第一个、因为是压缩过的，上传下载速度回很快、如果你要看源码，就第二个、如果说你有Sass项目要用他，就用第三个

下载下来的目录结构

image-20240420125439971

2.8、bootstrap初体验

运行如下代码你会发现、我们并没有给div设置宽度、但是他不是一个通栏的盒子、这是因为，bootstrap给他设置了，盒子的宽度

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入bootstrap文件 --><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>.container{height: 40px;background-color: pink;}</style>
</head>
<body><div class="container"></div>
</body>
</html>

2.9、bootstrap栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

简述为栅格化是指将网页的宽度分成若干等份，BootStrap3默认将网页分成了12等份

image-20240420151001288

栅格系统(grid systems),也叫“网格系统，它是通过一系列的行（row）与列（column）的组合创建页面布局。 我们的内容可以直接放入BootStrap栅格系统面。

image-20240420151106714

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入bootstrap文件 --><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>.container div{height: 50px;background-color: pink;}</style>
</head>
<body><div class="container"><!-- 在大屏幕下面、一行显示四个 --><!-- 在中等屏幕下面、一行显示两个 --><!-- 在小屏幕下面，一行显示一个 --><div class="col-lg-3 col-md-6 col-sm-12">1</div><div class="col-lg-3 col-md-6 col-sm-12">2</div><div class="col-lg-3 col-md-6 col-sm-12">3</div><div class="col-lg-3 col-md-6 col-sm-12">4</div></div>
</body>
</html>

container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

image-20240420152418082

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>.container{height: 50px;background-color: pink;}.container-fluid{height: 50px;background-color: blue;}</style>
</head>
<body><!-- 版心盒子 有宽度，且居中 --><div class="container">111</div><!-- 通栏的盒子 注意：左右自带padding值15px  css3的盒子模型：box-sizing:border-box;边框往内收--><div class="container-fluid">222</div></body>
</html>

分别使用.row类名和 .col类名定义栅格布局的行和列。

image-20240420152935817

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>.container{height: 50px;background-color: pink;}.container-fluid{height: 50px;background-color: blue;}.abc{background-color: red;height: 50px;}.abc div{height: 50px;background-color: yellow;}</style>
</head>
<body><!-- 版心盒子 有宽度，且居中 --><div class="container">111</div><!-- 通栏的盒子 注意：左右自带padding值15px  css3的盒子模型：box-sizing:border-box;边框往内收--><div class="container-fluid">222</div><div class="container abc"><!-- row 会把container的padding值去掉 --><div class="row"></div></div>
</body>
</html>

2.1、使用全局样式

BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。

网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

全局样式分为、布局样式和内容美化样式，

按钮样式

  • btn : 基准样式
  • btn-info; btn-success : 设置按钮背景色
  • btn-block : 设置按钮为块元素
  • btn-lg; btn-sm; btn-xs : 设置按钮大小
<button class="基本样式类，具体样式类">成功</button>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>.container{margin-top: 100px;/* height: 50px;background-color: pink; */}</style></style>
</head>
<body><div class="container"><!-- 表示成功或积极的操作 --><button type="button" class="btn btn-success">（成功）Success</button></div>
</body>
</html>

image-20240420155201286

表格

  • table : 基本类名, 初始化表格默认样式
  • table-bordered : 边框线
  • table-striped : 隔行变色
  • table-hover : 鼠标悬停效果
  • table-responsive : 表格宽溢出滚动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body><table class="table table-striped  table-hover"><!-- 表头类名 --><tr class="table-success"><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>18</td><td>男</td></tr><tr><td>李四</td><td>20</td><td>女</td></tr><tr><td>王五</td><td>18</td><td>男</td></tr><tr><td>赵六</td><td>20</td><td>女</td></tr>    </table>
</body>
</html>

image-20240420155252839

表单

form-control : 设置表单元素input, select, textarea的样式

checkbox 和 radio : 设置复选框和单选框的样式

form-inline : 设置表单元素水平排列

disabled : 设置表单禁用状态样式

input-lg; input-sm, input-sm : 设置表单元素的大小

<form class="form-inline"><div class="form-group"><label class="sr-only" for="exampleInputEmail3">Email address</label><input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"></div><div class="form-group"><label class="sr-only" for="exampleInputPassword3">Password</label><input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"></div><div class="checkbox"><label><input type="checkbox"> Remember me</label></div><button type="submit" class="btn btn-default">Sign in</button>
</form>

image-20240420155422872

图片美化

  • img-responsive: 图片自适应
  • img-rounded : 图片设置圆角
  • img-circle : 图片设置正圆
  • img-thumbnail : 图片添加边框线

image-20240420155744651

布局辅助类

  • pull-right : 强制元素右浮动
  • pull-left : 强制元素左浮动
  • clearfix : 清除浮动元素的影响
  • text-left文 : 本左对齐
  • text-right : 文本右对齐
  • text-center : 文本居中对齐
  • center-block : 块元素居中

布局响应式工具

  • 不同屏幕尺寸隐藏或显示页面内容

image-20240420160033346

2.2、组件

什么是组件？

所谓组件就是：BootStrap提供的常见功能，包含了HTML结构和CSS样式。

使用方式？

引入BootStrap样式

复制结构，修改内容

image-20240420160242485

其中包含例如、轮播图组件、导航组件、代码过去简单不在粘贴

2.3、字体图标

Glyphicons字体图标的使用步骤

  • HTML页面引入BootStrap样式文件
  • 空标签调用对应类名
    • glyphicon
    • 图标类
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>字体图标</title><link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css"><style>.bi-android2 {font-size: 100px;color: green;}</style></head><body><span class="bi-android2"></span></body>
</html>

2.4、插件

BootStrap提供的常见效果, 包含了HTML结构，CSS样式与JavaScript

image-20240420160921362

插件的使用步骤

  • 引入BootStrap样式
  • 引入js文件：jQuery.js + BootStrap.min.js

image-20240420161015243

复制HTML结构, 并适当调整结构或内容

2.5、定制

我们可以能够根据项目需求定制bootstrap框架

导航菜单 → 定制

输入目标变量值

编译并下载，使用定制后的框架

image-20240420161116507

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

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

相关文章

代码随想录算法训练营第五十九天 | 503. 下一个更大元素 II、42. 接雨水

代码随想录算法训练营第五十九天 | 503. 下一个更大元素 II、42. 接雨水

代码随想录算法训练营第五十九天 | 503. 下一个更大元素 II、42. 接雨水 503. 下一个更大元素 II题目解法 42. 接雨水题目解法 感悟 503. 下一个更大元素 II 题目 解法 题解链接 使用两个size class Solution { public:vector<int> nextGreaterElements(vector<in…
阅读更多...
【网络原理】UDP协议的报文结构 及 校验和字段的错误检测机制（CRC算法、MD5算法）

【网络原理】UDP协议的报文结构 及 校验和字段的错误检测机制（CRC算法、MD5算法）

目录 UDP协议 UDP协议的报文结构及注意事项 UDP报文结构中的校验和字段 1. 校验和主要校验的内容 2. UDP校验和的实现方式 3. CRC&#xff08;循环冗余校验&#xff09;算法 4. MD5&#xff08;Message Digest Algorithm 5&#xff09; UDP协议 上一篇文章提过&#xf…
阅读更多...
计算机网络实验——学习记录五（TCP协议2）

计算机网络实验——学习记录五（TCP协议2）

一、TCP协议重传机制 TCP协议是一种面向连接、可靠的传输层协议。为了保证数据的可靠传输&#xff0c;TCP采用数据包重传的机制来应对网络传输过程中可能出现的丢包、错包和乱序等问题。 TCP协议的重传包括超时重传、快速重传、带选择确认SACK的重传和重复SACK重传四种。 二、…
阅读更多...
grafana安装篇（1）

grafana安装篇（1）

目录 grafana概念&#xff1a; 它具有以下主要特点&#xff1a; Grafana 常用于以下场景&#xff1a; 环境介绍&#xff1a; 前置环境&#xff1a; (1)保证可以连接外网 (2)防火墙和selinux已关闭 1.下载安装grafana10.0.1-1rpm包 2.启动grafana 3.浏览器访问 3.设置…
阅读更多...
实验2 NFS部署和配置

实验2 NFS部署和配置

一、实训目的 1.了解NFS基本概念 2.实现NFS的配置和部署 二、实训准备 1.准备一台能够安装OpenStack的实验用计算机&#xff0c;建议使用VMware虚拟机。 2.该计算机应安装CentOS 7&#xff0c;建议采用CentOS 7.8版本。 3.准备两台虚拟机机&#xff08;客户机和服务器机&…
阅读更多...
Linux CPU 占用率 100% 排查

Linux CPU 占用率 100% 排查

其他层面要考虑到的地方 mysql&#xff0c;有执行时间特别长的sql、死锁redis雪崩等相关问题并发导出数据量大Java定时器服务业务复杂&#xff0c;比如像每天要更新电商的统计表&#xff0c;每天发送优惠券等业务需要提前计算才能保证业务使用时的流畅性&#xff0c;我这个原因…
阅读更多...
leetcode最大间距（桶排序+Python）

leetcode最大间距（桶排序+Python）

虽然直接排完序&#xff0c;再求最大差值更快&#xff0c;这里我们还是学一下桶排序。 桶排序主要维护一个bucket&#xff0c;初始bucket【i】 0&#xff0c;遍历nums&#xff0c;当i存在时&#xff0c;令bucket【i】 1&#xff0c;表示存在。遍历完nums&#xff0c;bucket中有…
阅读更多...
DiT解读：当Diffusion遇上Transformer

DiT解读：当Diffusion遇上Transformer

前置知识 ViT Vision Transformer是一种基于Transformer架构的深度学习模型&#xff0c;专门用于处理计算机视觉任务。他的1出现给以往CNN base的图像工作带来了很多新的可能性 ViT的核心思想是将图像分割成均匀的图像块&#xff0c;然后将这些图像块转换为序列&#xff0c;…
阅读更多...
【LAMMPS学习】八、基础知识(3.8)计算扩散系数

【LAMMPS学习】八、基础知识(3.8)计算扩散系数

8. 基础知识 此部分描述了如何使用 LAMMPS 为用户和开发人员执行各种任务。术语表页面还列出了 MD 术语&#xff0c;以及相应 LAMMPS 手册页的链接。 LAMMPS 源代码分发的 examples 目录中包含的示例输入脚本以及示例脚本页面上突出显示的示例输入脚本还展示了如何设置和运行各…
阅读更多...
4.点云数据的配准

4.点云数据的配准

1.点云配准ICP(Iterative Closest Point)算法 点云配准的原理及ICP(Iterative Closest Point)算法原理参照博客【PCL】—— 点云配准ICP(Iterative Closest Point)算法_icp点云配准-CSDN博客。 &#xff08;1&#xff09;点云配准原理&#xff1a;三维扫描仪设备对目标物体一…
阅读更多...
Learn ComputeShader 02 Multiple kernels

Learn ComputeShader 02 Multiple kernels

前面已经成功创建了第一个compute shader&#xff0c;并且使用它替换掉quad的材质的纹理&#xff0c;现在我们将要在计算着色器中创建多个kernel。 首先调整上次的计算着色器&#xff0c;让它显示为红色。 然后再次创建一个kernel&#xff0c;显示为黄色。 结果应该是这样的…
阅读更多...
mysql基础2——字段类型

mysql基础2——字段类型

整数类型 需要考虑存储空间和可靠性的平衡 浮点类型 浮点数类型不精准 将十进制数转换为二进制数存储 浮点数类型&#xff1a;float double real(默认是&#xff0c;double ) 如果需要将real设定为float &#xff0c;那么通过以下语句实现 set sql_mode "real_as…
阅读更多...
52 文本预处理【动手学深度学习v2】

52 文本预处理【动手学深度学习v2】

将文本作为字符串加载到内存中。 将字符串拆分为词元&#xff08;如单词和字符&#xff09;。 建立一个词表&#xff0c;将拆分的词元映射到数字索引;将文本转换为数字索引序列&#xff0c;方便模型操作。
阅读更多...
我在本地部署通义千问Qwen1.5大模型，并实现简单的对话和RAG

我在本地部署通义千问Qwen1.5大模型，并实现简单的对话和RAG

节前&#xff0c;我们星球组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、参加社招和校招面试的同学&#xff0c;针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 汇总…
阅读更多...
WordPress 告别 MySQL：Docker SQLite WordPress

WordPress 告别 MySQL：Docker SQLite WordPress

本篇文章聊聊&#xff0c;如何将这个持续诞生和维护了 21 年的开源软件“脱离数据库”运行&#xff0c;让它能够更加轻量、适合低成本离线运行。 写在前面 2003 年&#xff0c;Michel Valdrighi 基于 b2/cafelog 创建了开源软件 WordPress&#xff0c;并在 GPL 协议下发布。 …
阅读更多...
(一)Java EE企业级应用开发实战之Servlet教程——JDK安装

(一)Java EE企业级应用开发实战之Servlet教程——JDK安装

首先打开清华大学开源软件镜像站&#xff0c;清华大学开源镜像网站地址为&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/ 打开该地址后的界面显示如下图所示 找到8版本对应的SDK安装包&#xff0c;我现在用的开发机器是Windows&#xff0c;所以我找的是Windows对应的版本…
阅读更多...
[柏鹭杯 2021]试试大数据分解?

[柏鹭杯 2021]试试大数据分解?

题目&#xff1a;&#xff08;NSSCTF | 在线CTF平台&#xff09; 题目就是如此&#xff0c;我没看到有5个不同的文本&#xff0c;其中最后一个文本以pem后缀&#xff0c;所以我们先来了解一下什么是pem格式。 PEM 格式 PEM格式通常用于数字证书认证机构&#xff08;Certifica…
阅读更多...
EelasticSearch的介绍和基于docker安装

EelasticSearch的介绍和基于docker安装

1.概述 Elasticsearch 是一个基于 Apache Lucene 构建的开源分布式搜索引擎和分析引擎。它专为云计算环境设计&#xff0c;提供了一个分布式的、高可用的实时分析和搜索平台。Elasticsearch 可以处理大量数据&#xff0c;并且具备横向扩展能力&#xff0c;能够通过增加更多的硬…
阅读更多...
AES和RSA加解密算法学习笔记(实战版)

AES和RSA加解密算法学习笔记(实战版)

1. 写在前面 今天整理一篇有关密码学的学习笔记，原因是最近做的一个任务是在网络传输的时候，需要对传输的包进行加密和解密工作，以保证传输过程的安全性。所以，这个过程用到了AES和RSA两个算法。 场景：假设我要给我的老师传送毕设代码和论文， 我已经把代码和论文打成了一…
阅读更多...
VSCode 配置 C/C++ 环境

VSCode 配置 C/C++ 环境

1 安装 VSCode 直接去官网(https://code.visualstudio.com/)下载并安装即可。 2 配置C/C编译环境 方案一 如果是在Windows&#xff0c;需要安装 MingW&#xff0c;可以去官网(https://sourceforge.net/projects/mingw-w64/)下载安装包。 注意安装路径不要出现中文。 打开 w…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023