移动端开发+less+BSP

1.移动端基础

1.移动端调试方法

  • 通过谷歌浏览器来模拟手机调试
  • 搭建本地Web服务器。手机和服务器一个局域网内，通过手机访问浏览器
  • 使用外网服务器，直接IP或域名访问

2.视口

视口（Viewport）是移动设备上一个非常重要的概念，特别是在响应式设计和移动端开发中。视口是指用户通过浏览器查看网页时所看到的那一部分屏幕区域。理解视口对于确保网页在不同尺寸和分辨率的设备上正确显示至关重要。下面是关于视口的一些关键点：

视口的基本概念

  1. 视口的定义：

    • 视口是指移动设备上浏览器显示网页内容的可视区域。
    • 它并不是实际的物理屏幕大小，而是浏览器用来渲染网页内容的虚拟窗口。

  2. 视口的重要性：

    • 不同设备有不同的屏幕尺寸和分辨率，视口帮助浏览器确定如何缩放内容以适应设备屏幕。
    • 通过设置视口元标签，开发者可以控制页面在不同设备上的显示效果。

  3. 视口的类型：

    • 视觉视口（Visual Viewport）：用户实际看到的内容区域。
    • 理想视口（Ideal Viewport）：浏览器根据设备的物理尺寸和像素密度计算出的最佳视口尺寸。
    • 布局视口（Layout Viewport）：浏览器用来布局页面内容的参考视口，默认情况下通常是设备的物理宽度。

视口元标签(meta标签)

为了确保网页在不同设备上能够正确显示，通常会在HTML文档的<head>部分添加视口元标签：

1
<meta name="viewport" content="width=device-width, initial-scale=1">
  • **width=device-width**：设置视口的宽度等于设备的宽度（以CSS像素为单位），这样可以使页面宽度与设备宽度一致。
  • **initial-scale=1**：设置初始缩放比例为1，即不缩放，以1:1的比例显示页面。
  • maximum-scale：最大缩放比，大于0的数字
  • minimum-scale：最小缩放比，大于0的数字
  • user-scalable：用户是否可以进行缩放操作，yes or no (1或0)

视口单位

  • vw/vh：视口宽度/高度的百分比单位。
    • 1vw 相当于视口宽度的1%。
    • 1vh 相当于视口高度的1%。
  • vmin/vmax：较小/较大的视口尺寸的百分比单位。
    • 1vmin 是视口宽度和高度中较小者的1%。
    • 1vmax 是视口宽度和高度中较大者的1%。

3.二倍图

1.物理像素和物理像素比

物理像素（Physical Pixels）

  • 定义：物理像素是屏幕显示的最小颗粒，是硬件层面真实存在的像素点。

逻辑像素

逻辑像素是编程和设计中使用的抽象单位，它与设备独立像素对应。

物理像素比（Device Pixel Ratio, DPR）

物理像素比指的是一个逻辑像素（logical pixel）所对应的物理像素点的数量。它反映了设备的实际分辨率与其逻辑分辨率之间的关系。

  • 定义：物理像素比是指在同一排上一个逻辑像素能放置的物理像素的数量。例如，如果物理像素比为2，则意味着一个逻辑像素对应着两个物理像素点。
  • 示例：在iPhone X上，屏幕的实际分辨率为1125x2436物理像素，而逻辑分辨率（通常用于编程）为375x812逻辑像素。因此，物理像素比为1125/375=3.0，这意味着每个逻辑像素对应3个物理像素点。

在移动端开发中，“二倍图”（也称为@2x图像）是一种为了适应高分辨率屏幕而使用的图像资源。随着移动设备屏幕像素密度的提高，如iPhone的Retina显示屏等高清屏幕能够显示更多的细节，使得图像看起来更加清晰和细腻。为了确保在这些高分辨率屏幕上图像不失真且保持清晰，开发者需要使用更高分辨率的图像。

2.什么是二倍图

  • 分辨率提升：通常情况下，二倍图的分辨率是标准分辨率的两倍，即每个方向上的像素数都是普通图片的两倍。例如，如果一个标准图片的尺寸是50x50像素，那么它的二倍图版本就是100x100像素。
  • 文件命名：在命名二倍图时，通常会在文件名后加上“@2x”来表示这是为高分辨率屏幕准备的图像资源。例如，一张名为icon.png的标准图片，其对应的二倍图会命名为icon@2x.png。

二倍图使用方式

比如我们需要一个50x50的图片，我们可以使用它的二倍图也就是100x100px的图片，随后在手动利用CSS样式调整到50x50px

4.移动端技术选择

1.移动端主流方案

1.单独制作移动端页面

通常情况下，通过判断设备来决定，如果是移动端就打开移动端页面

2.响应式兼容PC移动端

通过判断屏幕宽度来改变样式，以适应不同终端

比如：https://xiaomi.com

2.移动端的盒模型

建议使用C3中的盒子模型。即怪异盒模型

box-sizing:border-box

5.移动端常见布局

1.流式布局 (Fluid Layout)

流式布局是一种使用户界面能够根据容器宽度（通常是视口或屏幕宽度）自动调整其尺寸的设计方法。它使用相对单位（如百分比 % 或者可伸缩单位如 em, rem）而不是固定单位（如 px），以确保布局在不同尺寸的屏幕上保持一致的比例。

实现方法：

  • 使用百分比宽度：在CSS中定义元素宽度时使用百分比，使其能够根据父元素的宽度自动调整。
  • Flexbox 和 Grid：现代Web开发中，可以利用CSS Flexbox和Grid布局来创建更加灵活且复杂的流式布局。
  • 媒体查询：虽然主要用于响应式设计，但也可以用于流式布局，以便在特定条件下应用不同的样式规则。

2.flex弹性布局(强烈推荐)

Flex弹性布局（Flexible Box Layout）是CSS3中的一项重要特性，它为Web开发者提供了一种更为灵活的方式来布局和对齐UI组件。Flex布局特别适用于响应式设计和移动应用开发，因为它能够轻松处理不同屏幕尺寸和方向的变化。

以下是Flex布局的一些关键概念和属性：

容器属性

  1. display: flex; 或 display: inline-flex;

    • 将一个元素定义为Flex容器。
    • display: flex; 创建一个块级Flex容器。
    • display: inline-flex; 创建一个内联Flex容器。

  2. flex-direction

    • 定义主轴的方向。
    • 可选值包括：
      • row：从左到右（默认值）
      • row-reverse：从右到左
      • column：从上到下
      • column-reverse：从下到上

  3. flex-wrap

    • 控制项目是否换行。
    • 可选值包括：
      • nowrap：不换行（默认值）
      • wrap：允许换行，第一行在上方
      • wrap-reverse：允许换行，第一行在下方

  4. justify-content

    • 控制主轴上项目的对齐方式。
    • 可选值包括：
      • flex-start：开始位置对齐（默认值）
      • flex-end：结束位置对齐
      • center：居中对齐
      • space-between：两端对齐，项目间的间隔平均分布
      • space-around：每个项目两侧的间隔相等

  5. align-items

    • 控制交叉轴上项目的对齐方式。（一行）
    • 可选值包括：
      • stretch：拉伸（默认值）
      • flex-start：开始位置对齐
      • flex-end：结束位置对齐
      • center：居中对齐
      • baseline：基线对齐

  6. align-content

    • 当有多行时，控制多行之间的对齐方式。
    • 可选值与align-items相同。

项目属性

  1. order

    • 定义项目的排列顺序。
    • 默认值为0。

  2. flex-grow

    • 定义项目的扩展比率。
    • 默认值为0。

  3. flex-shrink

    • 定义项目的收缩比率。
    • 默认值为1。

  4. flex-basis

    • 定义项目的初始主轴大小。
    • 默认值为auto，意味着项目的大小由内容决定。

  5. flex

    • 是flex-grow、flex-shrink和flex-basis的简写形式。
    • 默认值为0 1 auto。

  6. align-self

    • 允许单个项目覆盖容器的align-items属性。
    • 可选值与align-items相同。

3.less+rem+媒体查询布局

利用下面的步骤来定html元素需要的font-size的大小，因为单位rem是以HTML标签的font-size大小来决定的

1rem=HTML标签元素font-size大小

  1. 首先我们选一套标准尺寸 750为准
  2. 我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的
  3. 页面元素的rem值 =页面元素在 750像素的下px值 / html 里面的文字大小

4.响应式布局

1.响应式原理

原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而设置不同设备的目的

2.响应式布局容器

响应式需要一个父级作为布局容器，来配合子级元素实现变换效果。

原理：在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局.html</title>
    <style>
        .container {
            height: 150px;
            background-color: skyblue;
            /* 水平居中 */
            margin: 0 auto;
        }
        /* 1.超小屏幕下， 小于768px 布局容器宽度为100% */
        @media screen and (max-width:767px) {
            .container {
                width: 100%;
            }
        }
        /* 2.小屏幕下， 大于等于768px 布局容器宽度为750px */
        @media  screen and (min-width:768px) {
            .container {
                width: 750px;
            }
        }
        /* 3.中等屏幕下， 大于等于992px 布局容器宽度为970px */
        @media screen and (min-width:992px) {
            .container {
                width: 970px;
            }
        }
           /* 4.大屏幕下， 大于等于1200px 布局容器宽度为1170px */
           @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>

6.移动端事件

移动端事件是指在移动设备（如智能手机和平板电脑）上触发的用户交互事件。与传统的桌面端事件相比，移动端事件通常涉及到触摸屏幕的操作。下面是一些关键的移动端事件及其描述：

触摸事件（Touch Events）

触摸事件是移动设备中最常见的事件类型，它们允许开发者检测用户的触摸操作。主要包括以下几种：

  • **touchstart**：当用户触摸屏幕时触发。
  • **touchmove**：当用户的手指在屏幕上移动时触发。
  • **touchend**：当用户的手指离开屏幕时触发。
  • **touchcancel**：当触摸序列因某种原因被中断时触发。

事件特性

  • 触摸点：每个触摸事件都包含一个或多个触摸点的信息，可以通过 event.touches、event.changedTouches 等属性获取。
  • 多点触控：支持同时识别多个触摸点，这对于实现缩放和旋转等手势非常有用。

特殊注意事项

  • 延迟问题：在某些情况下，例如点击事件 (click) 在移动端可能会有大约 300ms 的延迟，这是因为浏览器需要等待用户可能的长按操作。为了克服这个问题，可以使用第三方库如 FastClick 或者使用 touchstart 事件来代替。
  • 双击与长按：在某些场景下，双击和长按操作可能会干扰正常的点击事件。可以使用 touchstart 和 touchend 事件来避免这些问题。

例子

下面是一个简单的示例，演示如何监听触摸事件并显示触摸点的位置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>触摸事件示例</title>
<style>
    #touchArea {
        width: 200px;
        height: 200px;
        background-color: lightblue;
        margin: 0 auto;
    }
</style>
</head>
<body>
<div id="touchArea"></div>
<script>
    const touchArea = document.getElementById('touchArea');

    touchArea.addEventListener('touchstart', (event) => {
        event.preventDefault(); // 防止默认行为（如滚动页面）
        const touches = event.changedTouches;
        for (let i = 0; i < touches.length; i++) {
            const touch = touches[i];
            console.log(`Touch at (${touch.clientX}, ${touch.clientY})`);
        }
    });

    touchArea.addEventListener('touchend', (event) => {
        console.log('Touch ended');
    });
</script>
</body>
</html>

其他相关事件

除了触摸事件之外，还有一些其他的移动端事件，例如：

  • **orientationchange**：当设备的方向改变时触发。
  • **deviceorientation**：当设备的方向改变时持续触发。
  • **gesturestart, gesturechange, gestureend**：与手势相关的事件，如缩放和旋转。
  • **contextmenu**：长按时触发，可以用来创建上下文菜单。

less基础

LESS 是一种动态样式语言，设计用于简化 CSS 的编写过程，并且使 CSS 更易于维护和管理。LESS 提供了变量、嵌套规则、混合（mixins）、函数等特性，这些功能使得 CSS 的编写更加灵活和强大。LESS 的源代码会被编译成标准的 CSS 文件，然后这些 CSS 文件可以被任何现代浏览器解析和显示。

1. 变量

LESS允许你在样式表中定义变量，这样就可以在多处重用相同的值，提高代码的可维护性。

  • 语法：@变量名:值
  • 变量名规范
    • 必须以@开头
    • 不能包含特殊字符
    • 不能以数字开头
    • 大小写敏感，区分大小写
1
2
3
4
5
6
7
8
9
// 定义变量
@color-primary: #3f51b5;
@color-secondary: #ffeb3b;

// 使用变量
.button {
  background-color: @color-primary;
  color: @color-secondary;
}

2. 嵌套规则

LESS中的选择器可以被嵌套，这样可以让你的代码更加清晰和组织良好。

HTML中的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Less嵌套.html</title>
</head>
<body>
    <!--div和a是嵌套关系-->
    <div class="header">
        <a href="#">文字</a>
    </div>
</body>
</html>

在less中,应用嵌套规则如下

1
2
3
4
5
6
7
8
9
10
.header {
    width: 200px;
    height: 200px;
    background-color: skyblue;
    //在less中,不需要再重新进行选择a,而是将嵌套的a标签直接写在header里面即可
    a {
        color: red;
    }
}

经过插件编译后的css文件内容如下

1
2
3
4
5
6
7
8
9
.header {
  width: 200px;
  height: 200px;
  background-color: skyblue;
}
.header a {
  color: red;
}

特殊性

如果有伪类/伪元素/交集选择器，我们内层选择器要在前面加上符号&

3. 混合（Mixins）

混入（Mixins）是一种将一组属性定义在一起的方式，可以在多个地方重用这些属性。它们可以带有参数，类似于函数。

1
2
3
4
5
6
7
8
9
10
11
// 定义混入
.border-radius(@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

// 使用混入
.button {
  .border-radius(10px);
}

4. 函数

LESS支持定义函数来执行计算或者处理值，例如颜色操作。

1
2
3
4
5
6
7
8
9
10
// 定义函数
.mix-colors(@color1, @color2) {
  @result: mix(@color1, @color2, 50%);
  return @result;
}

// 使用函数
.button {
  background-color: @mix-colors(#ff0000, #00ff00);
}

5. 运算

LESS支持基本的数学运算，如加、减、乘、除。

下面这种写法是一种混合的写法。混合的语法详见第三小结

1
2
3
4
5
6
7
8
9
// 运算示例
.width(@base: 100px) {
  width: @base / 2;
}

// 使用运算
.box {
  .width(200px); // 结果为 100px
}

注意点

  1. 运算符：
    • LESS 支持基本的数学运算符：加号 (+), 减号 (-), 乘号 (*), 除号 (/)。
    • 运算符两边需要有空格，例如 10px + 5px 而不是 10px+5px。
  2. 单位：
    • 当对具有单位的数值进行运算时，确保单位相同。
    • 如果没有单位，LESS 将假设是像素 (px)，例如 10 + 5 等同于 10px + 5px。
    • 对于两个不同的单位值之间的运算，运算结果的值取第一个值的单位
    • 如果两个值中只有一个值有单位，则运算结果就去该单位

6. 条件语句

LESS支持简单的条件语句来控制输出。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 条件语句
.theme(@theme: light) {
  @if (@theme == light) {
    background-color: #fff;
    color: #000;
  } @else if (@theme == dark) {
    background-color: #000;
    color: #fff;
  }
}

// 使用条件语句
.box {
  .theme(dark);
}

7. 循环

LESS支持简单的循环来重复执行一系列指令。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 循环示例
.gradient(@colors: (red, yellow, blue)) {
  @each $color in @colors {
    .gradient-stop(@color);
  }
}

.gradient-stop(@color) {
  .stop {
    stop-color: @color;
  }
}

// 使用循环
.box {
  .gradient(red, yellow, blue);
}

实际应用示例

下面是一个综合示例，展示如何使用LESS的各种特性来构建一个简单的响应式按钮：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 定义变量
@base-color: #3f51b5;
@text-color: #ffffff;
@button-padding: 10px;

// 混入定义
.border-radius(@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

// 混入使用
.button {
  background-color: @base-color;
  color: @text-color;
  padding: @button-padding;
  .border-radius(); // 使用默认半径

  // 媒体查询
  @media (max-width: 480px) {
    padding: @button-padding / 2;
  }
}

编译LESS到CSS

要将LESS文件转换为浏览器可识别的CSS文件，你需要使用LESS编译器。有许多工具可以帮助你完成这个任务，包括：

  • 命令行工具（如lessc）
  • 浏览器插件
  • IDE插件
  • 自动构建工具（如Gulp、Grunt）
  • Vscode中的easyLess插件

例如，使用lessc命令行工具，你可以通过以下命令来编译LESS文件：

1
lessc styles.less styles.css

以上就是LESS的基础知识和一些实用的示例。LESS让CSS变得更加模块化、可维护且易于扩展。随着对LESS的深入了解，你会发现它能极大地提升你的前端开发效率。

BootStrap开发框架

简介

Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。利用 jsDelivr 和我们提供的入门模板帮助你快速掌握 Bootstrap。

使用

1.下载

2.解压

下载完后会得到这样的一个压缩包

image-20240811151259334

我们进行解压即可，解压后，有两个文件分别是CSS文件和JS文件。我们按需引入即可

image-20240811151342528

image-20240811151601509

3.使用基础模板开始

请确保使用最新的页面设计和开发标准来设置页面。也就是说，使用 HTML5 文档类型（doctype）、并包含一个设置 viewport（视口）的 <meta> 标签以实现正确的响应式布局行为。这些要求组合在一起之后，你的页面应当如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- JavaScript 文件是可选的。从以下两种建议中选择一个即可！ -->

    <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script>

    <!-- 选项 2：Popper 和 Bootstrap 的 JS 插件各自独立 -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-Lge2E2XotzMiwH69/MXB72yLpwyENMiOKX8zS8Qo7LDCvaBIWGL+GlRQEKIpYR04" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Bootstrap布局容器

BSP给我们提供了很多用来布局的容器，只需要指定class属性就可以。

布局容器地址：https://v4.bootcss.com/docs/layout/overview/

容器

容器是 Bootstrap 中最基本的布局元素，在使用我们的默认网格系统时必不可少。容器用于包含、填充和（有时）居中其中的内容。虽然容器可以嵌套，但大多数布局不需要嵌套容器。

Bootstrap 有三种不同的容器：

  • .containermax-width，在每个响应断点处设置
  • .container-fluid，即width: 100%所有断点处
  • .container-{breakpoint}，直到width: 100%指定的断点

下表说明了每个容器max-width与原始容器.container以及.container-fluid每个断点的比较情况。

特小 <576px 小 ≥576px 中 ≥768px 大号 ≥992px 特大 ≥1200px
.container 100％ 540像素 720像素 960像素 1140像素
.container-sm 100％ 540像素 720像素 960像素 1140像素
.container-md 100％ 100％ 720像素 960像素 1140像素
.container-lg 100％ 100％ 100％ 960像素 1140像素
.container-xl 100％ 100％ 100％ 100％ 1140像素
.container-fluid 100％ 100％ 100％ 100％ 100％

栅格系统

使用我们强大的移动优先弹性框网格来构建各种形状和大小的布局，这得益于十二列系统、五个默认响应层、Sass 变量和混合以及数十个预定义类。

Bootstrap 的网格系统使用一系列容器、行和列来布局和对齐内容。它使用弹性框构建，并且完全响应。下面是一个示例，并深入介绍了网格的组成方式。

代码示例

一定要深深的记住，我们的栅格系统是使用一系列的容器(container)，行(row)，列(column)来布局的

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
  <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>

网格选项

特小 <576px 小 ≥576px 中 ≥768px 大号 ≥992px 特大 ≥1200px
最大容器宽度 无（自动） 540像素 720像素 960像素 1140像素
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-
列数 12 12 12 12 12
天沟宽度 30px（每列两侧各 15px） 同前 同前 同前 同前
可嵌套 是的 是的 是的 是的 是的
列排序 是的 是的 是的 是的 是的
  • 行(row)必须放到container里面
  • 实现多列划分，需要给列添加类前缀，并指定份数，如果不指定份数则均分12份
  • 列(column)大于12，多余的列所在的元素将被作为一个整体另起一行排列
  • 每一行默认有左右15px的内边距
  • 可以同时为一列指定多个设备的类名，以便划分不用份数，例如col-lg-3 col-md-4，这样写就意味着在不同屏幕下占不同的份数

列嵌套

最好加一个行 row 这样可以取消父元素的padding值，而且高度自动和父元素一样

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
    <div class="row">
        <div class="col-lg">
            <!-- 可以在插入一行来实现列嵌套 -->
            <div class="row">
                <div class="col-lg-4">a</div>
                <div class="col-lg-8">b</div>
            </div>
        </div>
        <div class="col-lg">2</div>
        <div class="col-lg">3</div>
        <div class="col-lg">4</div>
    </div>
</div>

列偏移

您可以通过两种方式偏移网格列：1.响应式.offset-网格类2.我们的边距实用程序。网格类的大小与列的大小相匹配，而边距更适用于偏移宽度可变的快速布局。

偏移类

使用类将列向右移动，语法：class="offset-md-偏移量"，通过这个语法，我们将该列的左边相当于加了一列，列的长度就是我们指定的偏移量。，比如class="col-md-4 offset-md-4"表示把列(col-md-4)向右偏移4份

image-20240812111425214

image-20240812111432480

添加偏移类后的代码

1
2
3
4
5
6
<div class="container">
    <div class="row">
        <div class="col-md-4">A</div>
        <div class="col-md-4 offset-md-4">B</div>
    </div>
</div>

效果：

image-20240812111514183

列排序

通过order实现列排序

  • order-first 把元素排列在第一位
  • order-last：把元素排列在最后一位
  • order-权重：这里的权重类似于优先级。可选数字的范围是 0~·12，权重越大，排序越靠前

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列排序.html</title>
    <link rel="stylesheet" href="./BootStrap/css/bootstrap.min.css">
    <style>
        .row div {
            width: 100%;
            background-color: skyblue;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- 通过order实现列排序
                order-first 把元素排列在第一位
            order-last：把元素排列在最后一位
            order-*：*这里指的是权重。可选数字的范围是 0~·12，权重越大，
            排序越靠前
            -->
            <div class="col-md-4 order-0">A</div>
            <div class="col-md-8 order-1">B</div>
        </div>
    </div>
</body>
</html>

响应式工具

display属性

利用我们提供的 display 工具类可以快速改变组件的 display 属性等，并且支持响应式布局。还包括对一些常见值的支持，以及打印时用来控制 display 属性的一些额外工具类。

工作原理

利用提供的工具类来控制元素的display属性。

命名

如果 display 属性相关的工具类名称中间没有与断点相关的缩写（即 sm、md、lg、xl 等）的话，则能够影响所有 断点。

断点：可以理解为阈值，简单理解就是屏幕范围的分类，详见本笔记中的栅格系统下的网格选项小结

断点有：sm、md、lg、xl等。所以命名格式是下面这样的：

  • .d-{value} for xs
  • .d-{断点}-{value} for sm,md,lg,and xl。
  • ！！！注意：命名和语法不一样

其中，value的取值可以是下面任意一个

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

隐藏页面元素

原理：控制元素的display属性值设置为none即可隐藏，如需隐藏某个页面元素，只需使用class="d-none"即可，同时也可以在响应式布局下使用，比如class="d-{断点}-none"

屏幕尺寸范围

设p为屏幕尺寸

  • p <576px 对应的断点名称为xs(特小屏幕)
  • 576 <= p <768px对应断点名称sm(小屏幕)
  • 768px <= p < 992px 对应断点名称为md(中等屏幕)
  • 992px <= p <= 1200px 对应断点名称为lg(大屏幕)
  • p> 1200px 对应断点名称为xl(特大屏幕)
屏幕尺寸 类
在所有尺寸的屏幕上隐藏 .d-none
只在 xs 尺寸的屏幕上隐藏 .d-none .d-sm-block
只在 sm 尺寸的屏幕上隐藏 .d-sm-none .d-md-block
只在 md 尺寸的屏幕上隐藏 .d-md-none .d-lg-block
只在 lg 尺寸的屏幕上隐藏 .d-lg-none .d-xl-block
只在 xl 尺寸的屏幕上隐藏 .d-xl-none
在所有尺寸的屏幕上显示 .d-block
只在 xs 尺寸的屏幕上显示 .d-block .d-sm-none
只在 sm 尺寸的屏幕上显示 .d-none .d-sm-block .d-md-none
只在 md 尺寸的屏幕上显示 .d-none .d-md-block .d-lg-none
只在 lg 尺寸的屏幕上显示 .d-none .d-lg-block .d-xl-none
只在 xl 尺寸的屏幕上显示 .d-none .d-xl-block

根据设计稿进行移动端适配

一般有以下几个步骤：

  1. 使用流式布局:避免使用固定宽度，采用百分比来定义元素的宽度
  2. 媒体查询:通过CSS的media query根据不同的屏幕宽度和设备类型调整样式。
  3. 视口单位:利用vw、vh等视口单位定义尺寸，以适应不同设备。
  4. 弹性单位:使用rem或em来定义元素的尺寸，确保字体等比例缩放。
  5. 图片适配:使用灵活的百分比宽度或者srcset属性，使图片能在各尺寸设备上正常显示
  6. 测试与调试:在实际设备上或模拟器中进行测试，确保在各种环境下都能正常显示。