网站建设 万网,如何上传网站到空间,建设银行网站上预览电子回单,wap网站微信分享代码文章目录 一、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来白 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 langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title!-- 引入CDN的CSS资源 --linkhrefhttps://cdn.jsdelivr.net/npm/bootstrap5.3.0-alpha1/dist/css/bootstrap.min.cssrelstylesheetintegritysha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gDcrossoriginanonymous/!-- 引入CDN的JS资源 --scriptsrchttps://cdn.jsdelivr.net/npm/bootstrap5.3.0-alpha1/dist/js/bootstrap.bundle.min.jsintegritysha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVimcrossoriginanonymous/scriptstylediv[class^col] {border: 1px solid purple;}/style/headbodydivdiv classcontainer text-centerdiv classrowdiv classcolcol/divdiv classcolcol/divdiv classcolcol/divdiv classcolcol/div/divdiv classrowdiv classcol-8col-8/divdiv classcol-4col-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 typescript1、安装
npm install antd --save2、在项目中使用
import React from react;
import { Button } from antd;const App: React.FC () (div classNameAppButton typeprimaryButton/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 -S2、完整引入
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-rowel-col :span24div classgrid-content bg-purple-dark/div/el-col
/el-row四、Vant
4.1 简介
1、vant
官方网站: https://vant-contrib.gitee.io/vant/#/zh-CN/homeVant 是·个轻量、川靠的移动端组件库于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本并由社区团队维护React 版本和支付宝小程序版本
2、使用场景
Vant 是一套轻量、可靠的移动端织件库。通过 Vant可以快速搭建出风格统一的页面提升开发效率。性能极佳组件平均体积小于 1KB (mingzip)70 个高质量组件覆盖移动端主流场景。使用TypeScript 编写提供完整的类型定义。单元测试覆盖率超过 90%提供稳定性保障。提供丰富的中英文文档和组件示例。支持按需引入和 Tree Shaking支持国际化内置 20 种语言包等等
3、包括内容
组件: Vant 包含 70 种常用的组件包括按钮、单元格、图标、布局等基础组件以及各种表单组件反馈组件展示组件导航组件和业务组件等等
4.2 基本使用
1、安装
# Vue 3 项目安装最新版 Vant
npm i vant# Vue 2 项目安装 Vant 2
npm i vantlatest-v2
2、常规使用
import { createApp } from vue;
// 1. 引入你需要的组件
import { Button } from vant;
// 2. 引入组件样式
import vant/lib/index.css;const app createApp();// 3. 注册你需要的组件
app.use(Button);
