CSS-6

响应式网页

如何实现响应式网页？
解决方案：
	方法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. and
	2. only
	3. not

媒体类型

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

媒体类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	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.响应式版心类：container
            2.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-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>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>