Web笔记Day04

2023年12月24日

一、响应式网页

解决方式

媒体查询

@media (媒体特性){
    选择器{
        样式;
    }
}

Bootstrap
“简介、直观、强悍的前端开发框架，让web开发更迅速、简单”

1. 媒体查询

媒体特性

max-width: 最大宽度
min-width: 最小宽度

<style>
    /* 屏幕宽度小于等于768，网页背景色是粉色-->max-width */
    @media (max-width: 768px){
        body{
            background-color: pink;
        }
    }
    /* 屏幕宽度大于等于1200，网页背景色是绿色-->min-width */
    @media (min-width: 1200px){
        body{
            background-color: green;
        }
    }
</style>

书写顺序

需求：
默认网页背景色是灰色
屏幕宽度大于等于768px，网页背景色是粉色
屏幕宽度大于等于992px，网页背景色是绿色
屏幕宽度大于等于1200px，网页背景色是skyblue
提示
min-width(从小到大)
max-width(从大到小)
● 一定要按顺序写，否则效果会被层叠消失。

案例：左侧隐藏

需求：网页宽度小于等于768px则隐藏左侧区域。

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        display: flex;
    }
    .left{
        width: 300px;
        height: 500px;
        background-color: pink;
    }
    .main{
        flex: 1; /*占用剩余父级尺寸，否则因文字导致left挤压偏小 */
        height: 500px;
        background-color: skyblue;
    }
    @media (max-width:768px){
        .left{
            display: none;/*左侧消失*/
        }
    }
</style>

完整写法

了解：

1	@media 关键词媒体类型 and (媒体特性) {css代码}

关键词 / 逻辑操作符
and
only
not

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

类型名称	值	描述
屏幕	screen	带屏幕的设备
打印预览	print	打印预览模式
阅读器	speech	屏幕阅读模式
不区分类型	all	默认值，包括以上3种情形

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

特性名称	属性	值
视口的宽和高	width、heigth	数值
视口最大宽和高	max-width、max-heigth	数值
视口最小宽和高	min-width、min-heigth	数值
屏幕方向	orientation	portrait:竖屏 landscape:横屏

思考：
当@media内css样式太多，代码复杂混乱，该如何解决？

@media (媒体特性){
    选择器{
        ......
    }
}

解决：

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

案例：

<!-- 视口宽度小于等于768px，网页背景色是粉色 -->
<link rel="stylesheet" media="(max=width: 768px)" href="./pink.css">
<!-- 视口宽度小于等于768px，网页背景色是粉色 -->
<link rel="stylesheet" media="(min=width: 1200px)" href="./green.css">

2. Bootstrap

简介

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

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

使用

下载：
下载Bootstrap V5中文文档–>进入中文文档–>下载 Bootstrap 生产文件
（bootsrtap.css为正常书写格式；bootstrap.min.css写在一行占空间小。单纯使用框架建议使用bootstrap.min.css）

使用：
引入Bootstrap CSS文件

1	<link rel="stylesheet" href="../BootStrap/css/bootstrap.min.css">

调用类名：container: 响应式布局版心类

1	<div class="container">测试</div>

栅格系统

栅格化是指将整个网页的宽度分成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

响应区间：

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container	None(auto)	540px	720px	960px	1140px	1320px
Class prefix前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-	.col-xxl-

常用布局类：
▢ col-*- ：列（例如Lcol-xxl-3）
▢ row ：行

代码：

<body>
    <!-- 
        视口宽度大于等于1200px,一行排4个盒子 ->3
        视口宽度大于等于768px,一行排2个盒子 ->6
        视口宽度大于等于576px,一行排1个盒子 ->12
     -->
     <!-- 版心 -> row -> 子级 -->
     <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>

*显示调用类名的插件：IntelliSence for CSS class names in HTML

全局样式

Button类
▢ btn：默认样式
▢ btn-success：成功
▢ btn-warning：警告
▢ ……
▢ 按钮尺寸：btn-lg / btn-sm

<body>
    <button class="btn btn-success btn-sm">小绿色按钮</button>
    <button class="btn btn-warning btn-lg">大黄色按钮</button>
</body>

表格类
▢ table：默认样式
▢ table-striped：隔行变色
▢ table-success：表格颜色(绿)
▢ ……

<body>
    <table class="table table-striped">
        <tr class="table-success">
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr>
            <th>张三</th>
            <th>18</th>
            <th>男</th>
        </tr>
    </table>
</body>

组件(Components)

引入样式表
引入js文件
复制结构，修改内容

例如导航、轮播图等，在官网copy代码即可，需要自定义可以配合网页检查，寻找需要修改的元素。当想要覆盖Bootstrap样式需要在末尾添加 !important;

字体图标

下载：
导航/Extend：图标库–>安装–>下载安装包–>bootstarp-icons-1.X.X.zip

使用：

 1. 复制font文件夹到项目目录
 2. 网页引入bootstrap-icon.css文件
 3. 调用CSS类名（图标对应的类名）

<!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/font/bootstrap-icons.css">
    <style>
        /* 美化字体图标 */
        .bi-android2{
            font-size: 100px;
            color: green;
        }
    </style>
</head>
<body>
    <!-- 安卓图标 -->
    <span class="bi-android2"></span>
</body>
</html>

案例

腾讯全端：略

文章归档

最新文章