web移动第四章

news/2024/12/25 11:08:32/

B站《前端Web开发HTML5+CSS3+移动web视频教程》第十五天课程学习：响应式网页

一、媒体查询

@media(媒体样式) {选择器{css样式}}

媒体特性：
max-width
min-width

1.书写顺序

因为css样式有层叠性，所以书写的时候要遵循下面的顺序
min-width：从小到大
max-width：从大到小

2.媒体查询的完整写法

在这里插入图片描述
（1）关键字/逻辑操作符
and、only、not
（2）媒体类型：用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备

（3）媒体特性：用来描述媒体类型的具体特征

3.媒体查询的外部css

在这里插入图片描述
代码 <link rel="stylesheet" media= " 逻辑符媒体类型 and (媒体特性)" href="xx.css">
提示：逻辑符和媒体类型可以省略，但是媒体特性外面的小括号不能省略。

二、Bootstrap框架

1.简介

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

2.使用步骤

①进入官网→ 下载最新版本的Bootstrap V5中文文档 → 进入中文文档 → 下载 → 下载Bootstrap 生产文件
②引入css文件
③调用类名

3.Bootstrap 栅格系统

栅格化是指将整个网页的宽度分为12个等分，每个盒子占用对应的份数，例如一行有四个盒子，则每个盒子占12/4=3份。
下图是Bootstrap栅格系统的响应区间
在这里插入图片描述
下图每个相应区间对应的版心布局和类前缀：
里面的.row类添加了display: flex;实现响应式布局的时候书写方式：类前缀+相应的份数

<!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/bootstrap.min.css">
</head>
<body><!-- 版心 → row类 →  子级--><!-- 视口宽度大于等于1200px，一行排四个盒子 ，视口宽度大于等于768px，一行排2个盒子 视口宽度大于等于576px，一行排1个盒子  --><div class="container"> <div class="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>
</body>
</html>

提示：VScode安装下面的插件，写代码时可以提示Bootstrap里面的类名
在这里插入图片描述

4.Bootstrap全局样式

（1）button类
①btn：清除按钮的默认样式，边框线、背景色等等
②btn-success：成功
③btn-warning：警告
④按钮尺寸：btn-lg / btn-sm
（2）表格类
①table：默认颜色
②table-striped：隔行变色
③table-success：表格颜色绿色

5.Bootstrap组件

（1）使用步骤
①引入样式
②引入js文件（看是否有动态功能，没有则不用引入）
③复制结构修改内容

6.Bootstrap字体图标

（1）下载
进入Bootstrap官网→ 导航 → 图标库 → 下载安装包 → bootstrap-icons-1.X.X.zip
（2）使用
①复制fonts问价夹到项目目录
②网页引入bootstrap-icons.css文件
③调用css类名（图标对应的类名）
代码：<i class="bi-android2"> </i>