响应式网页开发(自适应页面)

最新推荐文章于 2024-08-17 08:36:51 发布

Blue桃之夭夭

最新推荐文章于 2024-08-17 08:36:51 发布

阅读量1.7k

点赞数 18

分类专栏：前端文章标签：前端 html

本文链接：https://blog.csdn.net/qq_65966646/article/details/136159375

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一响应式

1 响应式的概念(自适应页面)

随着移动终端的兴起，多种页面规格出现，用户各种需求增加，我们需要通过响应式让用户在不同的终端看到接近相同的内容。

响应式也叫作”自适应页面”，可以根据浏览设备的不同，改变不同的布局文本图片等的效果

特点：

使用一套html结构，根据终端检查变化(宽度),同时使用”媒体查询”,将不同宽度的CSS加入到不同的媒体查询中，随着页面宽度的变化，改变布局样式

2. 设备的宽度

为了避免不可控的页面缩放，我们需要在HTML中告诉浏览器当前页面的设备大小是多少

需要使用到的标签就是meta标签，快捷写法:meta:vp然后补全代码

<meta name="viewport" content="width=device-width, initial-scale=1.0">

viewport 视口：指浏览器能让用户看得到的页面内容展示窗口

width=device-width 指视口宽度=设备宽度

initial-scale=1.0 指初始化视口不缩放

3. 媒体查询规则

@media (min-width:400px) and (max-width:900px) {

body {background-color: #0f0;}

}

@media 媒体查询规则

(min-width:400px) 设备的最小边界

and 两个尺寸的连接符注意左右两侧的空格必须写！

(max-width:900px) 设备的最大边界

{ CSS样式 } 在当前尺寸下生效的样式

4. 响应式断点的设计原则

响应式的核心是适配多种终端，多种终点具有多种尺寸范围，所以我们需要考虑这些范围下该匹配什么样的样式，UI设计底层采用了单边控制尺寸的写法，具体如下：

比576还小的尺寸，一般为手机、智能手表等

@media (min-width: 576px) {} 平板竖屏

@media (min-width: 768px) {} 平板横屏

@media (min-width: 992px) {} 低端显示器

@media (min-width: 1200px) {} 高端PC显示器

@media (min-width: 1400px) {} 超大屏幕，比如广告投放设备

5. 相对于视口的尺寸

vw(viewport width) 视口宽度

vh(viewport height) 视口高度

1vw == 视口(浏览器可视区域)宽度的1%

1vh == 视口(浏览器可视区域)高度的1%

浏览器可视区域的宽度是100vw 高度是100vh

注意:这两个单位可以灵活使用，不是vw只能设置给宽度，vh只能设置给高度

二 BootStrap

1. Bootstrap概述

Boot是由推特公司的两名工程师，基于html css js开发的简洁开源强大优雅的UI框架

至今经历了5个大版本，目前我们学习的就是BOOT5

BOOT内置了大量的CSS类供元素使用，相当于预先设置好一个类库，只要我们给对应的标签加指定的类名，就可以把标签渲染成指定的样式

2. 学习UI框架的终极意义

学习UI框架的终极意义，就是学会如何查文档运用文档

市面上有很多的UI框架，企业会用哪个不一定，但工作中一定会遇到框架

3. Bootstrap文档

Bootstrap中文网这个里面还能看到其他的版本

https://v5.bootcss.com/docs/5.1/getting-started/introduction/ 这个是5的查询网址

我们现在学习的是BOOT5，所以大家查询时应该查询BOOT5对应的文档

4. 下载生产文件

下载CSS的样式文件库 JS功能文件库图标文件库(单独下载的)

上面的3块内容都已经下载好了，压缩成了code.zip放在ftp大家用的话可以直接使用

5. 各个版本的区别

任何框架都会升级，升级后必然有一些改动，一定记得查看对应版本的手册

注意:工作中一定先看公司使用的项目框架版本，在公司开发手册中有体现

版本5的改动比较大，原来JS依赖JQuery，现在不依赖了，也不再兼容IE

对很多类名也有改动，最大的改动就是左右，如以前是float-left现在5版本是float-start

也就是所有的左都变成了start,所有的右都变成了end

6. 学习使用的模板

需要粘贴到新建demo里面

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

三 BootStrap5的响应式

1. 断点 breakpoints

断点 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

boot为我们设置了”5+1”个断点，写好了媒体查询，我们可以直接使用类中缀，就能直接对应某个响应式的范围，不用自己写了

<576 超小一般是手机

类中缀sm >=576 小平板

类中缀md >=768 中窄屏电脑

类中缀lg >=992 大普通电脑

类中缀xl >=1200 超大宽屏电脑

类中缀xxl >=1400 特大高清电脑或广告设备

Ctrl+F 搜索.container 查源码

2. 容器 container

https://v5.bootcss.com/docs/5.1/layout/containers/

定宽容器.container，就是一个响应式的版心，这个版心会根据页面宽度变换而变化

boot中容器的三种写法：

.container 它会自动适配断点，叫做定宽容器

会按照响应式的最大宽度体现，并且居中，左右有天沟(左右各有12px的内间距)

.container-fluid 全宽适配，变宽容器

它会撑满整个展示的全部宽度，也具有左右的天沟

.container-{*} 直接指定断点的类，用的较少，如: .container-sm

3. 天沟 gutter

gutter天沟这个词是直译过来的，指的是容器左右两侧的内间距

让内容不至于紧贴元素的两侧，默认左右各有0.75rem(12px)，共1.5rem(24px)间距

这个是BOOT源码，搜.container可得

padding-right: var(--bs-gutter-x, 0.75rem);

padding-left: var(--bs-gutter-x, 0.75rem);

四 BootStrap基础内容

1. 颜色color

https://v5.bootcss.com/docs/5.1/customize/color/

我们在开发中，使用框架是为了更加快速高效的开发

BOOT自带了一些设计好的颜色，我们可以直接使用

color: primary蓝色 danger红色 warning黄色 success绿色 dark暗色 light亮色

.bg-{color} 背景颜色

.text-{color} 字体颜色

.link-{color} 超链接颜色

.border-{color} 边框颜色

2. 标题

Typography · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网在页面内容->排版(typography)中找到

可以使用 .h1~.h6 样式同之前的h1~h6标签

还可以使用更大的字体

.display-1 ~ .display-6 没有加粗效果，比标题字更大，1号最大

3. 列表

</ul>

4. 表格 table

https://v5.bootcss.com/docs/5.1/content/tables/

.table 基础类写在<table>标签，必须写，有了这个基类其他的辅助类才能正常生效

.table-{color} 表格颜色可以加在表格、tr、td、th

.table-striped 条形纹效果，表格隔行变色

.table-hover 鼠标悬停变色效果

.table-bordered 给表格加边框，有了这个属性才可以改边框的颜色border-{color}

.table-dark 表头的深色主题

.table-light 表头的亮色主题

5. 表单 form

Forms · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

文本输入框与表述文字

. form-control 加在input标签上，让input有样式

. form-label 加在label标签上，有下外间距

下拉菜单 https://v5.bootcss.com/docs/forms/select/

. form-select 下拉菜单的基类，写给select标签

. form-select-lg 下拉菜单的字会大一些

. form-select-sm 下拉菜单的字会小一些

单选复选框

.form-check 单选框和复选框外层包裹的元素

.form-check-input 单选与复选的样式，会根据type属性值改变样式

.form-check-label 单选与多选关联文字样式

输入组

https://v5.bootcss.com/docs/forms/input-group/

. input-group 输入组最外层的包裹元素

. input-group-text 表单标签前面的文字提示，使用的是内联元素

. form-control 输入框用的是表单控件

五工具类

1. 尺寸Sizing

https://v5.bootcss.com/docs/5.1/utilities/sizing/

宽度和高度

在boot中提供的宽度和高度的类是按百分比算的

宽度 .w-{number} 支持25 50 75 100 auto 分别代表百分比

高度 .h-{number} 支持25 50 75 100 auto 分别代表百分比

注意:这里的大小是参照父级元素的百分比，所以前提是父级要有高度

相对视口的尺寸

vw-100 表示整个视口的宽度(全屏宽度)

vh-100表示整个视口的高度(全屏高度)

注意:没有25 50 75这些值

2. 间距

间距包括内间距和外间距

间距的分类

.m-{number} 表示外间距

.p-{number} 表示内间距

间距的方向

上内、外间距 pt-{number} 和 mt-{number}

下内、外间距 pb-{number} 和 mb-{number}

左内、外间距 ps-{number} 和 ms-{number}

右内、外间距 pe-{number} 和 me-{number}

垂直方向内、外间距 py-{number} 和 my-{number}

水平方向内、外间距 px-{number} 和 mx-{number}

特殊值：外间距的auto mx-auto水平方向的自动居中

间距的大小

值支持1~5 0表示没有该方向的间距

number=1时：0.25rem = 16*0.25 = 4px

number=2时：0.5rem = 16*0.5 = 8px

number=3时：1rem = 16*1 = 16px

number=4时：1.5rem = 16*1.5 = 24px

number=5时：3rem = 16*3 = 48px

响应式下的间距写法

p-{类中缀}-{number} 响应式写法的内间距

m-{类中缀}-{number} 响应式写法的外间距

响应式写法会随着.container的变化而变化

3. 边框 borders

边框样式

.border 边框的基础类默认四个方向1px的边框

单方向边框

上边框 .border-top

右边框 .border-end

下边框 .border-bottom

左边框 .border-start

边框的宽度

.border-{number} 0~5 0是去掉边框 1~5对应1px~5px的边框宽度

边框的颜色

.border-{color} 颜色就是boot提供的色值

边框圆角

.rounded 圆角的基础类默认给4个方向添加边框圆角

.rounded-{number} 圆角的弧度0~3 0是没有圆角 3是3px圆角

.rounded-circle 圆形

.rounded-pill 胶囊形

4. 元素的显示模式display

display 属性 · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

我们可以通过display修改元素的展示效果

.d-none 元素消失，相当于CSS的display:none;

.d-block 元素以块级的形式显示

.d-inline 元素以行内的形式显示

.d-inline-block 元素以行内块的形式显示

.d-flex 元素以弹性方式显示

以上每个值都有响应式的写法，如: .d-{类中缀}-{显示模式}

5. 浮动

Float · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

.float-start 左浮动

.float-end 右浮动

响应式浮动显示 .float-{类中缀}-{浮动方式}

清除浮动 https://v5.bootcss.com/docs/helpers/clearfix/

.clearfix 清除浮动导致的父元素高度坍塌

6. 定位

Position · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

定位方式

.position-relative 相对定位

.position-absolue 绝对定位

.position-fixed 固定定位

位移方向

top-{number} 对于顶部的位移位置

end-{number} 对于右侧的位移位置

bottom-{number} 对于底部的位移位置

left-{number} 对于左侧的位移位置

number支持 0 50 100 分别指参照物0% 50% 100%

中心位置位移：

.translate-middle 让元素在X轴 Y轴上回正自己的50% 实现中心点居中

底层源码：transform: translate(-50%, -50%) !important;

direction—flex主轴的方向

.flex-row 行模式

.flex-row-reverse 行模式反序

.flex-column 列模式

.flex-column-reverse 列模式反序

响应式写法: .flex-{类中缀}-{方向}

justify-content –主轴上项目的对齐方式

.justify-content-start 起点对齐

.justify-content-end 终点对齐

.justify-content-center 居中对齐

.justify-content-between 两端对齐

.justify-content-evenly 公平对齐

.justify-content-around 环绕对齐

响应式写法：.justify-content-{类中缀}-{对齐方式}

Align items – 项目在交叉轴上的对齐方式

.align-items-start 起点对齐

.align-items-end 终点对齐

.align-items-center 居中对齐

响应式写法：.align-items-{类中缀}-{对齐方式}

grow and shrink 项目的增长和收缩

.flex-grow-0 项目不允许增长【默认值】

.flex-grow-1 项目允许增长

.flex-shrink-0 项目不允许收缩

.flex-shrink-1 项目允许收缩【默认值】

8. 文本text

Text · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

文本的对齐方式

.text-start 文本、内联左对齐

.text-end 文本、内联右对齐

.text-center 文本、内联居中对齐

响应式写法：text-{类中缀}-{对齐方式}

字体处理

.fw-bold 加粗体

.fw-light 细体

.fw-normal 正常体

.fst-italic 斜体

文本修饰线

.text-decoration-underline 添加下滑线

.text-decoration-line-through 添加删除线

.text-decoration-none 去掉文本修饰线

六布局栅格系统 grid

Grid system · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

1. 行和列

1. 父子布局，父元素包裹子元素

2. 父元素使用.row行

3. 子元素是父元素的列，使用.col-{number}

4. 一行分为12份，最多容纳12列，每一列都是.col-1

5. 我们可以调整份数来修改子元素在父元素中所占的比例

6. 栅格布局每列都不允许有额外的外间距，但我们可利用元素有的12px的左右内间距(天沟)

2. 响应式栅格布局

栅格系统最大的作用就是帮我们实现响应式的布局

七组件15day

1. 按钮buttons

Buttons · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

拓展

https://sc.chinaz.com/mobandemo.aspx?downloadid=82022103256405

.btn 按钮的基础类

.btn-{color} 按钮的颜色

.btn-outline-{color} 带轮廓线的按钮

.btn-lg 大号尺寸的按钮

.btn-sm 小号尺寸的按钮

按钮组:使用一个外层div包裹着需要的几个按钮，给这个div加一个.btn-group即可

2. 导航栏navbar

Navbar · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

最外层包裹元素—功能块：

.navbar 导航栏的基础类

.navbar-expand-{断点} 响应式断点，确定大小菜单切换的节点

.navbar-dark 暗色主题 .navbar-light 亮色主题

LOGO区域

.navbar-brand logo可以是文字也可以是图片

小菜单

.navbar-toggler 修饰小菜单的样式，一般是button

.navbar-toggler-icon 作为小菜单的图标(三条横线) 用span包裹

JS属性：data-bs-toggle="collapse" 开启折叠功能

JS属性：data-bs-target="#navbarNav" 使用折叠功能的目标是谁(id对应的是大菜单)

大菜单

.collapse 消失和显示的切换

.navbar-collapse 负责水平铺满允许放大元素居中显示

.navbar-nav 导航栏列表，加给ul

.nav-item 列表项，加给li

.nav-link 链接，加给导航栏中的超链接a

.active 激活状态

.disabled 禁用状态

3. 徽章 badge

徽章（Badge） · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

在一个小的按钮区，固定一个类似于角标这样的内容

.badge 徽章的基础类，一般用内联元素，比如span

可以修改徽章的背景色 .bg-{color}

可以修改徽章的形状比如 rounded-pill 变成胶囊状

徽章也可以在父级元素中参与定位

4. 图标 icons

Bootstrap 图标库 · Bootstrap 官方开源图标（icon）库

iconfont-阿里巴巴矢量图标库阿里图标库

boot提供的图标其实就是文字

我们可以在图标库中找到自己需要的图标名称

使用方法：class=”bi-{图标名}”引入使用该图标

我们可以使用文字的类区修改图标的颜色大小等

5. 下拉菜单Dropdowns

Dropdowns · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

.dropdown 最外层父元素包裹按钮和下拉菜单

. dropdown-toggle 负责渲染按钮中的小三角

. dropdown-menu 下拉菜单父级一般是ul

.dropdown-item 下拉列表项一般具有hover样式

JS属性：data-bs-toggle="dropdown" 开启下拉菜单的菜单项的显示与隐藏

6. 模态框 Modal

Modal · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

被点击的对象

JS属性：data-bs-toggle="modal" 触发模态框的显示与隐藏

JS属性：data-bs-target="#弹出的模态框的id值"

弹出层

.modal 灰色遮罩

.fade 先消失

模态区域

.modal-dialog 弹出框框的区域

.modal-content 弹出框框中的内容

.modal-header 内容区域的头部

.modal-body 内容区域的主体

.modal-footer 内容区域的尾部

JS属性：data-bs-dismiss="modal" 控制关闭模态框的交互效果

7. 手风琴 accordion

Accordion · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

.accordion 手风琴最外层需要添加id属性，被手风琴其他地方使用

.accordion-item 手风琴中的每一组

展示头 .accordion-header 放按钮标题

JS属性: data-bs-toggle="collapse" 控制折叠/打开的属性

JS属性: data-bs-target="# collapseOne" 控制折叠/打开的对象 #后放目标对象的id

展示主体 .accordion-body

.collapse负责消失 .show负责显示

JS属性:data-bs-parent="#最上层父元素的id(sfq)"

通过js开合，关联最外层父级sfq，听它的指示关闭

8. 列表组listgroup

List group · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

.list-group 最外层功能块

.list-group-flush 加了一些下边框线

.list-group-item 列表组中的每一项

</ul>

9. 轮播图 carousel

Carousel · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

基础设置

.carousel 轮播图基础类

.slide 如果设置自动轮播了，轮播效果为平滑过渡

js属性：data-bs-ride="carousel" 设置自动轮播定时器

js属性：data-bs-interval="2000" 轮播图间的切换间隔，默认5000(5s)

注意要设置id值，因为本元素要作为父级目标方便子级实现效果 id="lbt" (轮播图)

最底部的控制区：

.carousel-indicators 控制符号的最外层

.active 当前项为激活项

.zdy-circle 我们可以自定义类修改控制区按钮的样式为圆形

js属性：data-bs-target="#lbt" 关联轮播图id

js属性：data-bs-slide-to="0" 控制图片的索引，图片数组下标从0开始

图片区：

.carousel-inner 图片区最外层

.carousel-item 图片组，默认都是消失状态

.active显示图片，注意只能显示一个图，自动轮播js底层其实也是切换这个属性

上一张切换区：

.carousel-control-prev 上一张区域

.carousel-control-prev-icon 上一张图标“<”

JS属性: data-bs-slide="prev" 控制轮播图选择上一张

下一张切换区：

.carousel-control-next 下一张区域

.carousel-control-next-icon 下一张图标“>”

JS属性: data-bs-slide="next" 控制轮播图选择下一张

最外层.carousel父级来控制子级的切换，左右控制的目标都是轮播图本身，所以

JS属性：data-bs-target="#lbt"

10. 卡片card

卡片（Cards） · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

.card 卡片的外层父级基础类，有边框有圆角

.card-img-top表示图片在卡片上部，给上左上右设置圆角

.card-img-bottom表示图片在卡片下部，给下左下右设置圆角

.card-body 卡片的文字部分外包裹标签，有间距

.card-title 卡片内容区域的标题

.card-text 卡片内容区域的文字描述

11. 分页pagination

分页（Pagination） · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

.pagination 最外层列表基础类

.page-item 分页项

.disabled 禁用状态

.active 激活状态

.page-link 分页链接样式，有间距和字体样式等设置

<!DOCTYPE html>

<html>

<head>

<title>分页练习 pagination</title>

</head>

<body>

</li>

</li>

</ul>

</div>

</body>

</html>

12. 面包屑导航 breadcrumb

面包屑导航（Breadcrumb） · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网

. breadcrumb 外层列表基础类

. breadcrumb-item 面包屑导航项

改变面包屑的分隔符：style="--bs-breadcrumb-divider: '>';"

<!DOCTYPE html>

<html>

<head>

<title>breadcrumb面包屑导航练习</title>

</head>

<body>

</li>

</li>

<a href="#" class="text-decoration-none text-dark">笔记本电脑</a>

</li>

</ol>

</div>

</body>

</html>

Blue桃之夭夭

关注

18
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

响应式网页开发(自适应页面)

一 响应式

二 BootStrap

三 BootStrap5的响应式

四 BootStrap基础内容

5. 表单 form

五 工具类

六 布局 栅格系统 grid

七 组件15day

一响应式

五工具类

六布局栅格系统 grid

七组件15day