响应式网页
如何实现响应式网页？
解决方案：方法1. 通过媒体查询的方法@media (条件) {html {background-color: green;}}方法2. 使用 Bootstrap 框架
方法一
基本使用
<style>/* 屏幕宽度小于等于768，网页背景色是粉色 --- 小于等于 <==> max-width */@media (max-width: 768px) {body {background-color: pink;}}/* 屏幕宽度大于等于1200，网页背景色是绿色 --- 大于等于 <==> min-width */@media (min-width: 1200px) {body {background-color: green;}}
</style>
以上是媒体查询的基本使用
书写顺序
<style>/* 网页默认背景色是灰色 */body {background-color: #ccc;}/* 屏幕宽度 大于等于 768px，网页背景色是粉色 */@media (min-width: 768px) {body {background-color: pink;}}/* 屏幕宽度 大于等于 992px，网页背景色是绿色 */@media (min-width: 992px) {body {background-color: green;}}/* 屏幕宽度 大于等于 1200px，网页背景色是skyblue */@media (min-width: 1200px) {body {background-color: skyblue;}}
</style>
书写顺序：min-width（从小到大）max-width（从大到小）
左侧隐藏案例
<style>* {margin: 0;padding: 0;}.box {display: flex;}.left {width: 300px;height: 500px;background-color: pink;}.main {flex: 1;height: 500px;background-color: skyblue;}@media (max-width:768px) {.left {/* 当视口宽度小于等于768时，隐藏左侧 */display: none;}}
</style><body><div class="box"><div class="left">left</div><div class="main">main</div></div>
</body>
完整写法（了解）
语法
@media 关键词 媒体类型 and (媒体特性) {CSS代码}
关键词
关键词 / 逻辑操作符1. and2. only3. not
媒体类型
它是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备
| 媒体类型名称 | 值 | 描述 |
|---|---|---|
| 屏幕 | screen | 带屏幕的设备 |
| 打印预览 | 打印预览模式 | |
| 阅读器 | speech | 屏幕阅读模式 |
| 不区分类型 | all | 默认值，包括以上3种情形 |
媒体特性
主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等
| 媒体特性名称 | 属性 | 值 |
|---|---|---|
| 视口的宽和高 | width、height | 数值 |
| 视口最大宽和高 | max-width、max-height | 数值 |
| 视口最小宽和高 | min-width、min-height | 数值 |
| 屏幕方向 | orientation | portrait：竖屏 landscape：横屏 |
媒体查询之引入外部CSS
<!-- 视口宽度小于等于768px时，网页背景色是粉色 --><link rel="stylesheet" media="(max-width: 768px)" href="./css/pink.css"><!-- 视口宽度大于等于1200px时，网页背景色是绿色 --><link rel="stylesheet" media="(min-width: 1200px)" href="./css/green.css">
全面的模板：<link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xxx.css">开发中常用：<link rel="stylesheet" media="(媒体特性)" href="xx.css">
方法二
Bootstrap 简介
中文官网：https://www.bootcss.com
Bootstrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果。
使用步骤
- 下载：Bootstrap V5 中文文档 >>> 进入中文文档 >>> 下载 >>> 下载 Bootstrap 生产文件
- 将下载好的文件进行解压 >>> 找到 bootstrap.min.css 文件 >>> 放入项目中
- 引入 Bootstrap CSS 文件
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css"> - 调用类名：container 可以实现响应式布局版心
<div class="container">Test</div>
栅格系统
专门用于响应式布局效果
<body><!-- 要求实现：视口宽度大于等于576px时，一行排1个盒子（即：每个盒子占12个栅格）视口宽度大于等于768px时，一行排2个盒子（即：每个盒子占6个栅格）视口宽度大于等于1200px时，一行排4个盒子（即：每个盒子占3个栅格）--><!-- 常见的bootstrap类：1.响应式版心类：container2.flex布局类：row--><div class="container"><div class="row"><div class="col-sm-12 col-md-6 col-xl-3">1</div><div class="col-sm-12 col-md-6 col-xl-3">1</div><div class="col-sm-12 col-md-6 col-xl-3">1</div><div class="col-sm-12 col-md-6 col-xl-3">1</div></div></div>
</body>
栅格化：将整个网页的宽度分成12等份，每个盒子占用对应的份数例如：如果需要一行排4个盒子，则每个盒子占3份即可 ( 12 / 4 = 3 )
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| Extra small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
| Class infix | None | sm | md | lg | xl | xxl |
|---|---|---|---|---|---|---|
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
补充：在VS Code中写关于Bootstrap的代码时，默认是没有代码提示需要自己安装一个VS Code 插件 —— IntelliSense for CSS class names in HTML
全局样式
button 类
官网查询：https://v5.bootcss.com/docs/components/buttons/
<div><button class="btn btn-success btn-sm">按钮1</button><button class="btn btn-warning btn-lg">按钮2</button></div>
btn: 默认样式btn-success: 成功
btn-warning: 警告
......按钮尺寸：btn-lgbtn-sm
table 类
官网查询：https://v5.bootcss.com/docs/content/tables/
<body><table class="table table-striped"><tr class="table-success"><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>18</td><td>男</td></tr><tr><td>李四</td><td>25</td><td>女</td></tr><tr class="table-danger"><td>王五</td><td>19</td><td>男</td></tr><tr><td>赵六</td><td>32</td><td>女</td></tr></table>
</body>
table: 默认样式
table-striped: 隔行变色
table-success: 表格颜色
......
组件(Components)
1. 引入css样式表
2. 引入js文件（需要结合实际情况，看看网页是否有动态功能，从而决定是否引入）
3. 复制代码，修改内容
组件举例
要求：通过"复制+粘贴"快速实现一个轮播图效果
轮播图官网地址：https://v5.bootcss.com/docs/components/carousel/
<style>.box {margin: 0 auto;width: 600px;height: 320px;}
</style><body><div class="container"><div class="box"><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"><img src="./images/img2.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./images/img3.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./images/img2.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./images/img3.png" class="d-block w-100" alt="..."></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></div></div><script src="./Bootstrap/js/bootstrap.min.js"></script>
</body>
字体图标
- 前往官网下载：https://icons.bootcss.com/
- 复制 fonts 文件夹到项目目录
- 网页引入 bootstrap-icons.css 文件
- 调用 CSS 类名（图标对应的类名）
<head><meta charset="UTF-8"><!-- 引入bootstrap-icons.css 文件 --><link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
</head>
<style>.bi-android2 {font-size: 100px;color: green;}
</style><body><span class="bi-android2"></span>
</body>
)
