【前端之旅】响应式布局及Bootstrap框架-EW帮帮网

在这里插入图片描述

一名软件工程专业学生的前端之旅，记录自己对三件套（HTML、CSS、JavaScript）、Jquery、Ajax、Axios、Bootstrap、Node.js、Vue、小程序开发（Uniapp）以及各种UI组件库、前端框架的学习。

【前端之旅】Web基础与开发工具
 【前端之旅】手把手教你安装VS Code并附上超实用插件指南
 【前端之旅】HTML大总结
 【前端之旅】CSS三万字总结
 【前端之旅】JavaScript学习笔记
 【前端之旅】Web前端发展简史
 【前端之旅】JavaScript进阶笔记
 【前端之旅】快速上手JSON
【前端之旅】一文掌握AJAX技术
 【前端之旅】Axios看这一篇就够了
 【前端之旅】响应式布局及Bootstrap框架
 【前端之旅】Node.js安装教程（图文版）
【前端之旅】uni-app学习笔记
 【前端之旅】手把手教你将uView UI配置到uniapp项目中

响应式布局及Bootstrap框架

1、响应式布局

1.1 响应式布局的概念

响应式布局（Responsive layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验
随着大屏幕移动设备的普及，响应式布局是“大势所趋”。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

1.2 响应式布局的必要性

随着手机、平板等智能设备的广泛使用，人们越来越多使用这些设备访问网站，因此，前端开发人员须考虑WEB页面在不同设备上的显示效果
桌面电脑/笔记本显示器的尺寸相对固定，但分辨率不同。随着技术的发展，近年来1920 * 1080分辨率常见，2K分辨率的笔记本屏幕，4K、甚至5K分辨率的桌面显示器开始出现
移动端，显示设备的尺寸、分辨率差异更大，4’、5’、6’、6.8’、8’、10’ ……

1.3 响应式网页设计

响应式网页设计是采用CSS的媒体查询（media query）技术，将三种已有的开发技巧，包括弹性、网格布局、弹性图片、媒体和媒体查询整合在一起，命名为响应式网页设计
在进行响应式网页设计时，应遵循以下原则：
- 简洁的菜单方便用户迅速找到所需功能
- 选择系统字体和响应式图片设计，使得网页尽快加载
- 清晰简短的表单项，便捷的自动填写功能，方便用户填写提交
- 相对单位让网页能够在各种视口规格任意转换
- 多用行为召唤组件，避免弹出窗口

2、响应式设计相关概念

2.1 CSS像素（CSS Pixel）

CSS像素是CSS中的一种长度单位
传统上，CSS中的一像素对应显示设备上的一个物理像素（实验室计算机的显示器）
随着显示设备的发展，设备上的物理像素越来越小，像素密度越来越高，如果CSS中的一像素仍然对应显示设备上的一个物理像素，文字显示过小，无法看清
因此，在手机等移动设备，及配有高分辨率显示器的桌面电脑上，系统将多个物理像素对应一个CSS像素，以将文字和图片放大
window.devicePixelRatio属性返回物理像素与CSS像素的比值，它告诉浏览器多少个物理像素对应一个CSS像素

CSS像素与DPR实例

<script>
  let e = document.createElement('p');
  e.textContent = `The current DPR is ${window.devicePixelRatio}`;
  document.body.append(e);
</script>

2.2 视口（Viewport）

视口，即viewport，是指浏览器窗口内的内容区域，不包含工具栏、标签栏等区域，也就是网页实际显示的区域。
一般来说，移动端浏览器在 viewport区域内渲染页面。为了兼容没有为移动端优化的网页，移动端浏览器默认将viewport的宽度设置为比设备实际（CSS像素）宽度大的区域，比如960px，以容纳多数为桌面端设计的页面

viewport属性

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

在为移动端优化的页面中，需要添加上述meta属性
作用：
- width=device-width，告诉浏览器使用设备的实际CSS像素宽度，而不要为兼容使用桌面浏览器宽度
- initial-scale=1.0，初始放大状态为1，保持原始比例，不放大也不缩小
其它参数
- minimum-scale / maximum-scale允许用户的最小/最大缩放值，
- user-scalable：值为“no”或“yes”, 代表是否允许允许用户进行缩放

2.3 不同显示设备优化

显示设备种类繁多，尺寸差异大
方案1：
- 1024px对应桌面
- 768px对应pad
- 480px对应手机
问题：横屏、竖屏、2K、4K，不同像素密度 … …
方案2：寻找临界点—即当视觉效果开始不符合人们的审美或影响了内容获取时对应的值，根据临界点确定区间，设计师为不同的区间设计页面.

3、媒体查询

语法：

@media mediatype and|not|only (media feature) {
      /* CSS-Code; */
}

媒体查询以@media开头，利用 and | not |only 这些逻辑关键字把媒介类型和条件表达式串联起来形成布尔表达式，判断是否满足当前浏览器的运行环境。如果满足，则上面的styles部分的样式就会起作用，进而改变页面元素的样式，否则，页面效果不产生任何变化。

3.1 媒体类型

注意：CSS2.1和CSS3 media query定义了tty, tv, projection, handheld, braille, embossed, aural这些media type，但是它们在media query 4 中都废弃了，所以不推荐使用

3.2 环境参数

媒体类型只能识别显示设备的类型，还需要针对运行设备监测环境参数，比如长宽或分辨率等，下面列举了一些常用的参数：

max-width: 定义输出设备中的页面最大可见区域宽度
min-width: 定义输出设备中的页面最小可见区域宽度
orientation: 设备的方向，portrait和landscape分别表示竖直和水平
resolution: 设备的分辨率，以DPI(Dots Per Inch)或者DPCM(Dots Per Centimeter)表示

3.3 条件表达式

条件表达式用来判断设备环境参数，从而确定相应的显示方法，例如：

@media screen and (max-width: 960px) { 
  body { background-color: red; } 
}

表示当屏幕设备宽度小于或等于960px时，屏幕设备的背景色将被设为红色，其中and关键字用来指定当某种设备类型的某种特性的值满足某个条件时所使用的样式。

@media screen and (min-width:576px) and (max-width:767px){
    body{font-size: medium;}
}

表示设备类型的屏幕，宽度在576像素和767像素之间，字体大小为medium。

4、Bootstrap

4.1 Bootstrap概述

“Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.” – v5.getbootstrap.com

用来构建响应式、移动优先网页的框架
源于Twitter的内部项目Twitter Blueprint，后来发展为开源项目
主要版本：首个发布（2011.08)，V2（响应式）、 V3（mobile-first）、 V4（Sass、Flexbox），最新V5.1.1（移除jQuery依赖，不再支持IE）
框架包含CSS和JavaScript两部分，以CSS为主，辅以JavaScript实现一些组件的功能，如模态框

4.2 使用Bootstrap

访问官网：www.bootcdn.cn
在HTML中引入CSS和JavaScript
访问Bootstrap主页，复制CSS和JavaScript链接
如仅需要外观样式，可只引入CSS
如需要弹出对话框等功能，需要引入JavaScript库

起始模板（Starter template）

<!doctype html>
<html lang="zh-CN">
<head>
  <!-- 必须的 meta 标记 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  <title>Bootstrap（V5）起始模板</title>    
</head>
<body>
  <h1>Hello, world!</h1>
  <!-- 可选的 JavaScript -->
  <!-- bundle版整合了Popper.js和Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script></body>
</html>

4.3 Bootstrap说明

HTML5 doctype：使用Bootstrap，必须使用HTML5文档类型声明。
响应式meta标记： Bootstrap“移动优先”策略，为保证正确渲染和触摸缩放，必须添加如下meta标记:
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
Box-sizing：为了更直接的尺寸计算，Bootstrap在全局范围将box-sizing属性值从默认的content-box调整为border-box。这意味元素的width包含padding和border。
Reboot：为增强跨浏览器渲染，Bootstrap使用Reboot来修正不同浏览器和设备间的不一致性，同时提供些许更固执的HTML常用元素的重置

4.4 Bootstrap支持的浏览器

5、Bootstrap Layout

5.1 Breakpoints（断点）

断点是Bootstrap中预定义的媒体查询临界点，它们会触发响应式布局随设备或视口而改变
断点是响应式设计的基础元素，使用媒体查询通过断点构建你的CSS，Bootstrap通常在媒体查询中使用min-width。
移动优先：Bootstrap的目标是让我们使用最少量的CSS代码使布局在最小断点（手机屏幕）上正常显示，然后再分层添加代码使布局在各类大屏上正常显示。

Bootstrap包含六个默认的用于响应式设计的断点

这些断点并不针对任何特定的场景或设备，但它们提供了一致的范围
注意：X-Small没有中缀，这体现了“移动优先”，不加任何中缀，默认为最小屏优化

断点对应的媒体查询

// 超小屏 x-small(竖屏手机, 宽度小于576px) 
// 不需要媒体查询，因为是Bootstrap默认尺寸
 
// 小屏设备 small(横屏手机, 宽度576及以上) 
@media (min-width: 576px) { ... } 
// 中屏设备 medium (平板, 768px及以上) 
@media (min-width: 768px) { ... } 
// 大屏设备 large(台式电脑, 992px及以上) 
@media (min-width: 992px) { ... } 
// 超大屏设备 x-large(大屏台式电脑, 1200px 及以上) 
@media (min-width: 1200px) { ... } 
// 超超大屏设备 xx-large(更大的台式电脑, 1400px及以上)
@media (min-width: 1400px) { ... }

类名称中缀举例

col-sm-4，在小屏及以上（≥576px）占据4个模板列宽度
d-md-none，在中屏及以上（≥768px）不显示
d-lg-block，在大屏及以上（≥992px）显示为block元素
联合使用：class=“d-none d-lg-block”，在大屏及以上（≥992px）显示为block元素，以下不显示

5.2 容器（Containers）

Bootstrap中最基本的布局元素之一
容器用来容纳内容，设置内边距，并将内容居中
使用Bootstrap的栅格系统需要使用容器元素
Bootstrap中的三类容器：
- .container，所有响应断点设置max-width
- .container-fluid，所有响应断点设置width为100%
- .container-{breakpoint}，断点以下设置width为100%

各容器与最大宽度（max-width）关系

5.3 Flex（弹性）布局

Flex是CSS 3新增的更强大的布局模型，替代基于浮动（float）的布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
二个基本概念：
- 容器：布局的父元素（容器），其中的子元素要进行弹性布局
- 项目：弹性布局容器中的每一个直系子元素，这些子元素要依据弹性布局的规则进行排列
给容器添加display: flex/inline-flex，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式。注意：弹性布局不影响子元素(项目）内部元素排列

5.3.1 弹性布局—方向

两个基本方向：
- 主轴：通过属性规定水平或垂直方向为主轴；
- 交叉轴：与主轴垂直的另一方向，称为交叉轴。

flex-direction属性控制主轴的方向，应用在容器元素上
flex-direction: row/row-reverse 主轴水平，交叉轴垂直

flex-direction属性控制主轴的方向，应用在容器元素上
flex-direction: column/column-reverse 主轴垂直，交叉轴水平

5.3.2 弹性布局—换行

flex-wrap：定义如果一条轴线排不下，如何换行，应用在容器元素上。取值：
- nowrap（默认）：不换行。当容器宽度不够时，每个项目会被挤压宽度；
- wrap：换行，并且第一行在容器最上方；
- wrap-reverse：换行，并且第一行在容器最下方

5.3.3 弹性布局—主轴对齐

justify-content：定义项目在主轴上的对齐方式，应用在容器元素上，取值：
- flex-start（默认值）：项目位于主轴起点。
- flex-end：项目位于主轴终点。
- center：居中
- space-between：两端对齐，项目之间的间隔都相等。(开头和最后的项目，与父容器边缘没有间隔)
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。(开头和最后的项目，与父容器边缘有一定的间隔)
主轴方向为：row-起点在左边，row-reverse-起点在右边， column-起点在上边，column-reverse-起点在下边

主轴对齐示例

5.3.4 弹性布局—交叉轴对齐

align-items：定义项目在交叉轴上如何对齐，应用在容器元素上
- flex-start：交叉轴的起点对齐
- flex-end：交叉轴的终点对齐
- center：交叉轴的中点对齐
- baseline: 项目的第一行文字的基线对齐(文字的行高、字体大小会影响每行的基线)
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

交叉轴对齐示例

5.4 Bootstrap对弹性布局的支持

通过一组预定义的样式类，且支持响应式，如
d-flex：添加到容器元素上，使元素进行响应式布局（等同于为元素添加display: flex）
d-sm-flex：使元素在小屏及以上进行响应式布局
d-lg-flex：使元素在大屏及以上进行响应式布局
… …

关于主轴方向的样式类：.flex-row、.flex-row-reverse、.flex-column等
同样支持响应式：
.flex-sm-column：在小屏及以上主轴方向垂直
.flex-md-row：在中屏及以上主轴方面为水平
… …

关于主轴对齐方式的样式类：.justify-content-start、.justify-content-between、.justify-content-lg-start 等等
关于交叉轴对齐方式的样式类：.align-items-start、.align-items-baseline、.align-items-md-center 等等
关于交叉轴单个元素对齐方式的样式类：.align-self-start、.align-self-md-start
更多内容参考文档：https://getbootstrap.com/docs/5.0/utilities/flex/

5.5 栅格系统（Grid system）

栅格系统使用容器、行和列来布局和排列内容
基于flexbox，完全响应式

<div class="container bg-lightgreen">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

row是column的容器
col-sm: sm及以上屏幕显示为列，以下显示为行
container在不同尺寸下的效果

5.5.1 栅格系统—基本数字列

一行（row)有12个模板列(template column)
列名中的数字表示该列跨越几个模板列，如.col-md-4表示该列在中等及以上屏幕上占据4个模板列（中等以下屏幕占据一行）
通常一个row中所有列占据的模板列之和应等于12，但
- 如果一个row中所有列占据小于12个模板列，则会留下空白
- 如果一个row中所有列占据多于12个模板列，则会换行

5.5.2 栅格系统—等分列

col-{breakpoint}: 平分可用空间，可在行中与数字列或自动列混合使用

5.5.3 栅格系统—自动列

col-{breakpoint}-auto：根据内容设置列宽

5.5.4 栅格系统—响应式

匹配（从小到大）所有屏幕尺寸时，使用不带断点的类名，如col-3、col-auto和col
使用一组col-{breakpoint}-xx，效果是：
- 在breakpoint之上（包含breakpoint）的屏幕上水平排列，宽度由“xx”指定
- breakpoint之下垂直排列，每列占据一行

响应式例子

响应式，混合不同断点

按需组合带有不同断点的类

<p class="lead">中屏：8：4，小屏和以下：第一列占据一整行，第二列占据半行</p>
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row mb-2">
   <div class="col-md-8">.col-md-8</div>
   <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

列水平对齐

使用Bootstrap包装的弹性布局相关属性
应用在row元素上
.justify-content-start = justify-content: flex-start
.justify-content-end = justify-content: flex-end
.justify-content-center = justify-content: center
.justify-content-between = justify-content: space-between
.justify-content-evenly = justify-content: space-around

列水平对齐支持响应式：
.justify-content-md-start
.justify-content-sm-center

列垂直对齐

使用Bootstrap包装的弹性布局相关属性
应用在row元素上
.align-items-start = align-items: flext-start
.align-items-center = align-items: center
… …
响应式：.align-items-md-center .align-items-lg-start … …

单列垂直对齐—单一元素

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
响应式：align-self-md-center .align-self-lg-end

重排序（reordering)

使用order-*类重新排列列的视觉位置，能够使列的视觉位置与其在代码中出现的位置不同
支持order-1到order-5
支持响应式，即允许order-md-1
第一项：order-first，最后一项：order-last

列间距

类.gx-{1-5}可调整列水平间距
类.gy-{1-5}可调整列垂直间距，注意这里的垂直间距是row中出现换行是行与行之间的间距
类.g-{1-5}同时调整水平和垂直间距
注意：这组类通过padding调整间距，列之间的边距和背景色仍然是相连的

这五个响应式断点中，sm一般应用于横屏手机（≥576px），md一般应用于平板（≥768px），lg一般适配桌面电脑（≥992px），xl（≥1200px）一般适配大屏桌面电脑，xxl一般适配更大屏幕电脑（≥1400px）。

【前端之旅】响应式布局及Bootstrap框架

响应式布局及Bootstrap框架

1、响应式布局

1.1 响应式布局的概念

1.2 响应式布局的必要性

1.3 响应式网页设计

2、响应式设计相关概念

2.1 CSS像素（CSS Pixel）

2.2 视口（Viewport）

2.3 不同显示设备优化

3、媒体查询

3.1 媒体类型

3.2 环境参数

3.3 条件表达式

4、Bootstrap

4.1 Bootstrap概述

4.2 使用Bootstrap

4.3 Bootstrap说明

4.4 Bootstrap支持的浏览器

5、Bootstrap Layout

5.1 Breakpoints（断点）

5.2 容器（Containers）

5.3 Flex（弹性）布局

5.3.1 弹性布局—方向

5.3.2 弹性布局—换行

5.3.3 弹性布局—主轴对齐

5.3.4 弹性布局—交叉轴对齐

5.4 Bootstrap对弹性布局的支持

5.5 栅格系统（Grid system）

5.5.1 栅格系统—基本数字列

5.5.2 栅格系统—等分列

5.5.3 栅格系统—自动列

5.5.4 栅格系统—响应式

网站公告

今日签到

热门文章

最新发布

【前端之旅】响应式布局及Bootstrap框架

响应式布局及Bootstrap框架

1、响应式布局

1.1 响应式布局的概念

1.2 响应式布局的必要性

1.3 响应式网页设计

2、响应式设计相关概念

2.1 CSS像素（CSS Pixel）

2.2 视口（Viewport）

2.3 不同显示设备优化

3、媒体查询

3.1 媒体类型

3.2 环境参数

3.3 条件表达式

4、Bootstrap

4.1 Bootstrap概述

4.2 使用Bootstrap

4.3 Bootstrap说明

4.4 Bootstrap支持的浏览器

5、Bootstrap Layout

5.1 Breakpoints（断点）

5.2 容器（Containers）

5.3 Flex（弹性） 布局

5.3.1 弹性布局—方向

5.3.2 弹性布局—换行

5.3.3 弹性布局—主轴对齐

5.3.4 弹性布局—交叉轴对齐

5.4 Bootstrap对弹性布局的支持

5.5 栅格系统（Grid system）

5.5.1 栅格系统—基本数字列

5.5.2 栅格系统—等分列

5.5.3 栅格系统—自动列

5.5.4 栅格系统—响应式

网站公告

今日签到

热门文章

最新发布

5.3 Flex（弹性）布局