当前位置： 首页 > news >正文

第三章：前端UI框架介绍

news 2025/6/9 22:54:00

文章目录

  • 一、Bootstrap
    • 1.1 Bootstrap简介及版本
    • 1.2 Bootstrap使用
  • 二、AntDesign
    • 2.1 简介
    • 2.2 基本使用
    • 2.3 antd pro
  • 三、ElementUI
    • 3.1 简介
    • 3.2 基本使用
  • 四、Vant
    • 4.1 简介
    • 4.2 基本使用

一、Bootstrap

1.1 Bootstrap简介及版本

1、 简介

Bootstrap，来白 Twitter，是目前最受欢迎的前端框架之一。Bootstrap 是基丁 HTML、CSS、JavaScript的，它在jQucry的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
Bootstrap 简洁灵活，使得 Web 开发更加快捷。其最大的优势是响应式布局，使得开发者可以方便的让网页无论在台式机、平板设备、手机上都获得最佳的体验

2、Bootstrap包括内容

  • 基本结构:：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
  • CSS: Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
  • 组件: Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出·框等等。这将在 布局组件部分详细讲解。
  • JavaScript 插件: Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件部分详细讲解。
  • 定制: 您可以定制 Bootstrap 的组件、LESS 变量和 Query 插件来得到您自己的版本

3、官网地址

  • 官网下载地址: http://getbootstrap.com/
  • 中文网下载地址:http://www.bootcss.com/
  • 如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。

4、如何选择版本

  • 根据文档中对浏览器中的支持
  • 是否依赖jQuery
    在这里插入图片描述

1.2 Bootstrap使用

1、栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视(viewport)尺寸的增加，系统会自动分为最多12列
在这里插入图片描述

  • Bootstrap栅格参数
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入CDN的CSS资源 --><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"rel="stylesheet"integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"crossorigin="anonymous"/><!-- 引入CDN的JS资源 --><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim"crossorigin="anonymous"></script><style>div[class^="col"] {border: 1px solid purple;}</style></head><body><div><div class="container text-center"><div class="row"><div class="col">col</div><div class="col">col</div><div class="col">col</div><div class="col">col</div></div><div class="row"><div class="col-8">col-8</div><div class="col-4">col-4</div></div></div></div></body>
</html>

二、AntDesign

2.1 简介

官网: https://ant.design/index-cn。
AntDesign，来自蚂蚁金服体验技术部，是基于React (官方实现)的目前最受欢迎的前端框架之一。 AntDesign 可以应对量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应的企业级产品。
AntDesign 具有学习成本低、上手速度快、实现效果好等特点。其最大的优势通过模块化的解决方案，降低冗余的生产成本，让设计者专注于更好的用户体验。

1、应用场景

  • 提炼自企业级中后台产品的交互语言和视觉风格
  • 开箱即用的高质量 React 组件。也有支持Vue的版本和Angular的版本（社区实现）
  • 使用 TypeScript 开发，提供完整的类型定义文件。
  • 全链路开发和设计工具体系。
  • 数十个国际化语言支持

2、包括内容：

  • 基本使用:此部分包含AntDesign基本简介，以及如何快速创建一个包含AntDesign组件的简单项目，以便创建各种相关的组件。
  • 组件:AntDesign 包含几十种常用的组件，包括按钮，图标，排版等通用组件，以及栅格布局，间距等布局组件，此外还有导航、数据录入、数据展示、反馈等相关组件，将在组件部分详细讲解。
  • Ant Design Pro:作为一个开箱即用的前端脚手架，是基于 Ant Design 和 umi的封装的·整套企业级中后台前端/设计解决方案

3、全局样式

  • 主题颜色
  • 栅格体系
    • 栅格化系统基于 FIx 布局，允许子元素在父节点内的水平对齐方式 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直所中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。
  • 按钮
  • Form表单

4、antDesign资源
在这里插入图片描述

2.2 基本使用

0、创建一个react工程

npx create-react-app antd-demo --template typescript

1、安装

npm install antd --save

2、在项目中使用

import React from 'react';
import { Button } from 'antd';const App: React.FC = () => (<div className="App"><Button type="primary">Button</Button></div>
);export default App;

2.3 antd pro

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端设计解决方案。
官网：https://pro.ant.design/

三、ElementUI

3.1 简介

官方网站: https://element.eleme.cn/#/zh-CN
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。
Element 提供了众多的UI组件，可以快速搭建前端项目，后期也更加容易维护，更加适合敏捷开发。设计师可以下载设计文件，在设计阶段可以直接使用模板，既可以快速设计出图，也可以保证前端实现。

1、使用场景

  • Element UI 是一款交互和设计都很优秀的前端UI框架，基于Vue 2.0，(Element Plus 基于Vue 3.0)，同时也有基于React和Angular的实现，满足各种前端技术选型，以及前端开发人员选择。
  • 框架的视觉设计非常优秀，细节处理很到位。
  • 交互体验非常好，即便复杂的表单，反馈也很清晰，操作简洁。
  • 容易上手，官方示例代码充足。
  • 支持定制主题，方便设计师进行个性化设计风格的设置。

2、基本使用

  • 基本使用:此部分包含Element基本简介，以及如何快速创建一个包含Element组件的简单项目，以便创建各种相关的组件。
  • 组件: Element 包含几十种常用的组件，包括按钮，图标，排版等通用组件，以及栅格，布局，间距等布局组件，此外还有导航、数据录入、数据展示、反馈等相关组件，将在组件部分详细讲解。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

3.2 基本使用

  • elementUI是基于vue2的，element-plus基于vue3

1、安装

npm i element-ui -S

2、完整引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

3、vue组件中使用

<el-row><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

四、Vant

4.1 简介

1、vant

  • 官方网站: https://vant-contrib.gitee.io/vant/#/zh-CN/home
  • Vant 是·个轻量、川靠的移动端组件库，于 2017 年开源。
  • 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护React 版本和支付宝小程序版本

2、使用场景

  • Vant 是一套轻量、可靠的移动端织件库。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。
  • 性能极佳，组件平均体积小于 1KB (min+gzip)
  • 70+ 个高质量组件，覆盖移动端主流场景。
  • 使用TypeScript 编写，提供完整的类型定义。
  • 单元测试覆盖率超过 90%，提供稳定性保障。
  • 提供丰富的中英文文档和组件示例。
  • 支持按需引入和 Tree Shaking，支持国际化，内置 20+ 种语言包，等等

3、包括内容

  • 组件: Vant 包含 70+ 种常用的组件，包括按钮、单元格、图标、布局等基础组件，以及各种表单组件，反馈组件，展示组件，导航组件和业务组件等等，
    在这里插入图片描述
    在这里插入图片描述

4.2 基本使用

1、安装

# Vue 3 项目，安装最新版 Vant
npm i vant# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

2、常规使用

import { createApp } from 'vue';
// 1. 引入你需要的组件
import { Button } from 'vant';
// 2. 引入组件样式
import 'vant/lib/index.css';const app = createApp();// 3. 注册你需要的组件
app.use(Button);

相关文章：

第三章：前端UI框架介绍

文章目录 一、Bootstrap1.1 Bootstrap简介及版本1.2 Bootstrap使用 二、AntDesign2.1 简介2.2 基本使用2.3 antd pro 三、ElementUI3.1 简介3.2 基本使用 四、Vant4.1 简介4.2 基本使用 一、Bootstrap 1.1 Bootstrap简介及版本 1、 简介 Bootstrap&#xff0c;来白 Twitter&a…...

编程日记 2023/8/12 14:56:39

javaScript：文档流写入和元素写入

目录 前言 文档流写入 把元素直接写入到文档流 注意​编辑 注意 元素写入 注意 innerHTML 特点&#xff1a; 设置内容 获取内容 innerText 特点&#xff1a; 注意 相关代码 前言 在JavaScript中&#xff0c;文档流写入是指将内容直接写入到DOM&#xff08;文档对…...

编程日记 2023/8/12 14:55:38

【BI系统】选型常见问题解答二

本文主要总结BI系统选型过程中遇见的常见问题&#xff0c;并针对性做出回答&#xff0c;希望能为即将选型&#xff0c;或正在选型BI系统的企业用户们提供一个快速了解通道。 有针对金蝶云星空的BI方案吗&#xff1f;能起到怎样的作用&#xff1f; 答&#xff1a;奥威BI系统拥…...

编程日记 2023/8/12 14:54:36

docker版jxTMS使用指南：使用jxTMS采集数据之一

本文讲解了如何jxTMS的数据采集与处理框架并介绍了如何用来采集数据&#xff0c;整个系列的文章请查看&#xff1a;docker版jxTMS使用指南&#xff1a;4.4版升级内容 docker版本的使用&#xff0c;请查看&#xff1a;docker版jxTMS使用指南 4.0版jxTMS的说明&#xff0c;请查…...

编程日记 2023/8/12 14:53:35

【js】日期、时间正则匹配

1、日期的正则表达式 格式&#xff1a;2023-08-11 var reg /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/; var regExp new RegExp(reg); if(!regExp.test(value)){alert("日期格式不正确");return; }2、时间的正则表达式 格式&#xff1a;23:00:00…...

编程日记 2023/8/12 14:52:34

专利研读-SIMD系列-向量化引擎

专利研读-SIMD系列-向量化引擎 1、专利内容 阿里巴巴的专利&#xff1a;向量化处理数据的方法及装置&#xff0c;主要思想为&#xff1a;对于行存表或行、列存混合存储的查询场景&#xff0c;需要手工将行存表转换成列存表再在列存表基础上进行向量化处理&#xff0c;这种方式代…...

编程日记 2023/8/12 14:51:33

C#--设计模式之单例模式

单例模式大概是所有设计模式中最简单的一种&#xff0c;如果在面试时被问及熟悉哪些设计模式&#xff0c;你可能第一个答的就是单例模式。 单例模式的实现分为两种&#xff1a; 饿汉式&#xff1a;在静态构造函数执行时就立即实例化。懒汉式&#xff1a;在程序执行过程中第一…...

编程日记 2023/8/12 14:50:32

RWEQ风蚀方程模型与ArcGIS数据处理Python代码库添加结合理论研究和科研实践

RWEQ模型是应用比较普遍的能适应大区域定量估算风蚀量的模型。该模型是基于大量野外实验的一种经验模型&#xff0c;在实际测定风力导致的土壤侵蚀量以及当地的气象、地表植被、土壤湿度、地表的结皮和地表的可蚀性等因子的基础上得出的一个经验方程。 1、掌握土壤风蚀模型的原…...

编程日记 2023/8/12 14:49:29

基于STM32微控制器的物联网（IoT）节点设计与实现

基于STM32微控制器的物联网（IoT）节点的设计和实现。我们讨论物联网节点的基本概念和功能，并详细介绍了STM32微控制器的特点和优势。然后，我们将探讨如何使用STM32开发环境和相关的硬件模块来设计和实现一个完整的物联网节点。最后，我们将提供一个示例代码，展示如何在STM3…...

编程日记 2023/8/12 14:48:27

篇二十一：中介者模式：解耦对象之间的交互

篇二十一&#xff1a;"中介者模式&#xff1a;解耦对象之间的交互" 开始本篇文章之前先推荐一个好用的学习工具&#xff0c;AIRIght&#xff0c;借助于AI助手工具&#xff0c;学习事半功倍。欢迎访问&#xff1a;http://airight.fun/。 另外有2本不错的关于设计模式…...

编程日记 2023/8/12 14:47:25

tomcat的多实例，动静分离（web服务基础结束）

多实例 多实例就是在一台服务器上有多个tomcat的服务&#xff08;核心是改端口&#xff09; 实验&#xff1a;多实例 安装步骤 1.安装好 jdk 2.安装 tomcat cd /opt tar zxvf apache-tomcat-9.0.16.tar.gz mkdir /usr/local/tomcat mv apache-tomcat-9.0.16 /usr/local/tomca…...

编程日记 2023/8/12 14:46:24

LeetCode150道面试经典题--判断子序列(简单)

1.题目 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是"abcde"的一个子序…...

编程日记 2023/8/12 14:45:22

kubeadml 安装 k8s

目录 一&#xff1a;kubeadml 安装 k8s 1、网络环境 2、 环境准备 3、 所有节点安装docker 4、所有节点安装kubeadm&#xff0c;kubelet和kubectl ​5、部署K8S集群 6、测试 二&#xff1a; 部署 Dashboard 一&#xff1a;kubeadml 安装 k8s 1、网络环境 master&am…...

编程日记 2023/8/12 14:44:20

考研C语言进阶题库——更新16-20题

目录 16计算t11/2...1/n-11/n 17计算1997&#xff01; 18计算t1-122-133-...-1nn 19相传国际象棋是古印度舍罕王的宰相达依尔发明的.舍罕王十分喜爱象棋,决定让宰相自己选择何种赏赐. 这位聪明的宰相指着8*8共64格的象棋说:陛下,请您赏给我一些麦子吧. 就在棋盘的第1格放1粒…...

编程日记 2023/8/12 14:43:19

【变形金刚01】attention和transformer所有信息

图1.来源&#xff1a;Arseny Togulev在Unsplash上的照片 一、说明 这是一篇 长文 &#xff0c;几乎讨论了人们需要了解的有关注意力机制的所有信息&#xff0c;包括自我注意、查询、键、值、多头注意力、屏蔽多头注意力和转换器&#xff0c;包括有关 BERT 和 GPT 的一些细节。因…...

编程日记 2023/8/12 14:42:17

面试热题（路径总和II）

给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 在这里给大家提供两种方法进行思考&#xff0c;第一种方法是递归&#xff0c;第二种方式使用回溯的方式进行爆…...

编程日记 2023/8/12 14:41:16

测试 tensorflow 1.x 的一个demo 01

tensorflow 1.0的示例代码 demo_01.py import tensorflow as tf import os os.environ[TF_CPP_MIN_LOG_LEVEL]2def tf114_demo():a 3b 4c a bprint("a b in py ",c)a_t tf.constant(3)b_t tf.constant(4)c_t a_t b_tprint("TensorFlow add a_t b_t &…...

编程日记 2023/8/12 14:40:13

达蒙DM数据库使用经验

DM表/字段注释 注&#xff1a;dm数据库无法在建表的同时为字段名添加注释 //为表添加注释 comment on table 库名.表名 is 表注释; //为表字段添加注释 comment on column 库名.表名.列名 is 列注释;DM查询错误&#xff1a;无效的表或视图 1&#xff0c;确认表一定存在 2&am…...

编程日记 2023/8/12 14:39:12

Redis—集群

目录标题 主从复制第一次同步命令传播分担主服务器压力增量复制总结面试题什么是Redis主从复制Redis主从复制的原理Redis主从复制的优点Redis主从复制的缺点Redis主从复制的配置步骤Redis主从复制的同步策略主从节点是长还是短连接判断某个节点是否正常工作主从复制架构中&…...

编程日记 2023/8/12 14:38:11

【C语言】数据在内存中的存储详解

文章目录 一、什么是数据类型二、类型的基本归类三、 整型在内存中的存储1.原码、反码、补码2.大小端(1)什么是大小端(2)为什么会有大小端 四、浮点型在内存中的存储1. 浮点数存储规则 五、练习1.2.3.4.5.6.7. 一、什么是数据类型 我们可以把数据类型想象为一个矩形盒子&#x…...

编程日记 2023/8/12 14:37:09

Appium如何支持ios真机测试

ios模拟器上UI自动化测试 以appiumwebdriverio为例&#xff0c;详细介绍如何在模拟器上安装和测试app。在使用ios模拟器前&#xff0c;需要安装xcode&#xff0c;创建和启动一个simulator。simulator创建好后&#xff0c;就可以使用xcrun simctl命令安装被测应用并开始测试了。…...

编程新知 2025/6/9 21:31:29

Linux Docker的简介

参考资料 30分钟Docker入门教程 ◀ 本篇博客所有图片皆来自于该视频截图阮一峰 - Docker 入门教程 目录 一. 环境配置时可能会遇到的问题二. 什么是Docker三. 虚拟机 与 Docker 的区别3.1 虚拟机3.2 Docker 四. Docker的基本架构五. Dockerfile 一. 环境配置时可能会遇到的问题…...

编程新知 2025/6/9 19:22:23

LeetCode--25.k个一组翻转链表

解题思路&#xff1a; 1.获取信息&#xff1a; &#xff08;1&#xff09;给定一个链表&#xff0c;每k个结点一组进行翻转 &#xff08;2&#xff09;余下不足k个结点&#xff0c;则不进行交换 2.分析题目&#xff1a; 其实就是24题的变题&#xff0c;24题是两两一组进行交换&…...

编程新知 2025/6/9 16:20:43

基于sqlite的任务锁（支持多进程/多线程）

前言 介绍 任务锁，在多进程服务间控制耗时任务的锁，确保相同id的耗时任务同时只有一个在执行 依赖 SqliteOp，参考这篇文章 https://blog.csdn.net/weixin_43721000/article/details/137019125 实现方式 utils/taskLock.py import timefrom utils.SqliteOp import Sqli…...

编程新知 2025/6/9 15:50:44

iview-admin静态资源js按需加载配置

iview-admin2.0版本默认加载所有组件的JS&#xff0c;实际情况下&#xff0c;用户访问后台并不会每个页面都浏览。这样就会造成流量及带宽的浪费。可通过修改配置文件vue.config.js来实现按需加载&#xff0c;具体配置如图 image © 著作权归作者所有,转载或内容合作请联系…...

编程新知 2025/6/9 15:36:53

Docker 部署 Python 的 Flask项目

文章目录 一、构建运行 Docker 容器1. 查找合适镜像2.本地docker 拉取镜像3.项目配置1. python项目下生成 requirements.txt 依赖文件2. 生成Dockerfile文件3.忽略不必要文件4. 构建镜像 4. 运行容器5.测试 二、常见问题与解决方案 一、构建运行 Docker 容器 1. 查找合适镜像 …...

编程新知 2025/6/9 15:05:55

CppCon 2015 学习:Memory and C++ debugging at Electronic Arts

这是关于 C 游戏开发中内存接口与调试工具演进 的介绍&#xff0c;主要回顾了从早期到现在平台上的内存与调试策略变化&#xff1a; 游戏平台演进与内存接口编程风格 2000年 (PlayStation 2) 编程风格偏向嵌入式 C 风格。系统资源有限&#xff08;例如 32MB RAM&#xff09;…...

编程新知 2025/6/9 14:03:39

深入浅出玩转物联网时间同步：基于BC260Y的NTP实验与嵌入式仿真教学革命

在万物互联的时代&#xff0c;精准的时间戳是物联网系统的神经节拍器&#xff0c;而NTP协议正是维持这一节律的核心技术。 一、时间同步&#xff1a;物联网世界的隐形基石 在智慧城市、工业4.0等场景中&#xff0c;分散的设备需要毫秒级的时间协同。网络时间协议&#xff08;N…...

编程新知 2025/6/9 12:27:17

OpenCV 图像通道的分离与合并

一、知识点 1、一张彩色图像可以由R、G、B三个通道的灰度图合并而成。 2、void split(InputArray m, OutputArrayOfArrays mv); (1)、将多通道阵列划分为几个单通道阵列。 (2)、参数说明: m: 要分离的多通道阵列。 mv: 输出的vector容器&#xff0c;每个元素都…...

编程新知 2025/6/9 9:48:51

【PCIe总线】-- inbound、outbound配置

PCI、PCIe相关知识整理汇总 【PCIe总线】 -- PCI、PCIe相关实现 由之前的PCIe基础知识可知&#xff0c;pcie的组成有&#xff1a;RC&#xff08;根节点&#xff09;、siwtch&#xff08;pcie桥&#xff09;、EP&#xff08;设备&#xff09;。 RC和EP&#xff0c;以及EP和EP能…...

编程新知 2025/6/9 7:28:15