CSS-6
响应式网页
如何实现响应式网页？
解决方案：
方法1. 通过媒体查询的方法
@media (条件) {
html {
background-color: green;
}
}
方法2. 使用 Bootstrap 框架
方法一
基本使用
以上是媒体查询的基本使用
书写顺序
书写顺序：
min-width（从小到大）
max-width（从大到小）
左侧隐藏案例
"box">
"left">left
"main">main
完整写法（了解）
语法
@media 关键词 媒体类型 and (媒体特性) {
CSS代码
}
关键词
关键词 / 逻辑操作符
1. and
2. only
3. not
媒体类型
它是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备
| 媒体类型名称 | 值 | 描述 |
|---|---|---|
| 屏幕 | screen | 带屏幕的设备 |
| 打印预览 | 打印预览模式 | |
| 阅读器 | speech | 屏幕阅读模式 |
| 不区分类型 | all | 默认值，包括以上3种情形 |
媒体特性
主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等
| 媒体特性名称 | 属性 | 值 |
|---|---|---|
| 视口的宽和高 | width、height | 数值 |
| 视口最大宽和高 | max-width、max-height | 数值 |
| 视口最小宽和高 | min-width、min-height | 数值 |
| 屏幕方向 | orientation | portrait：竖屏 landscape：横屏 |
媒体查询之引入外部CSS
"stylesheet" media="(max-width: 768px)" href="./css/pink.css">
"stylesheet" media="(min-width: 1200px)" href="./css/green.css">
全面的模板：
"stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xxx.css">
开发中常用：
"stylesheet" media="(媒体特性)" href="xx.css">
方法二
Bootstrap 简介
中文官网：https://www.bootcss.com
Bootstrap是由Twitter公司开发维护的前端UI框架，它提供了大量编写好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果。
使用步骤
- 下载：Bootstrap V5 中文文档 >>> 进入中文文档 >>> 下载 >>> 下载 Bootstrap 生产文件
- 将下载好的文件进行解压 >>> 找到 bootstrap.min.css 文件 >>> 放入项目中
- 引入 Bootstrap CSS 文件
- 调用类名：container 可以实现响应式布局版心 Test
栅格系统
专门用于响应式布局效果
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-xl-3">1div>
<div class="col-sm-12 col-md-6 col-xl-3">1div>
<div class="col-sm-12 col-md-6 col-xl-3">1div>
<div class="col-sm-12 col-md-6 col-xl-3">1div>
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">按钮1button>
<button class="btn btn-warning btn-lg">按钮2button>
div>
btn: 默认样式
btn-success: 成功
btn-warning: 警告
......
按钮尺寸：
btn-lg
btn-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>18td>
<td>男td>
tr>
<tr>
<td>李四td>
<td>25td>
<td>女td>
tr>
<tr class="table-danger">
<td>王五td>
<td>19td>
<td>男td>
tr>
<tr>
<td>赵六td>
<td>32td>
<td>女td>
tr>
table>
body>
table: 默认样式
table-striped: 隔行变色
table-success: 表格颜色
......
组件(Components)
1. 引入css样式表
2. 引入js文件（需要结合实际情况，看看网页是否有动态功能，从而决定是否引入）
3. 复制代码，修改内容
组件举例
要求：通过"复制+粘贴"快速实现一个轮播图效果
轮播图官网地址：https://v5.bootcss.com/docs/components/carousel/
"container">
"box">
"carouselExampleIndicators" class="carousel slide">
"carousel-indicators">
"carousel-inner">
"carousel-item active">
"./images/img2.png" class="d-block w-100" alt="...">
"carousel-item">
"./images/img3.png" class="d-block w-100" alt="...">
"carousel-item">
"./images/img2.png" class="d-block w-100" alt="...">
"carousel-item">
"./images/img3.png" class="d-block w-100" alt="...">
字体图标
- 前往官网下载：https://icons.bootcss.com/
- 复制 fonts 文件夹到项目目录
- 网页引入 bootstrap-icons.css 文件
- 调用 CSS 类名（图标对应的类名）
<head>
<meta charset="UTF-8">
<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>