加入VIP
注册
> 所有资源 学习资料 | 学员日志 | 技术贴

四种框架的区别比较：bootstrap,layui,elementui,vantui

学习资料 3K+ 3年前 0 云创动力

四种框架的区别比较：bootstrap,layui,elementui,vantui

一、导入：

普通模式：

bootstrap：

全局设置--->必须使用HTML5文档类型

<!DOCTYPE html>
<html lang="en">
  ...
</html>
外部链接

导入css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

导入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.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

响应式 meta 标签 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

案例

layUI：
1. 作为独立组件使用

引入文件

 <!-- 注意jquey和layer.js引用文件不用顺序不能颠倒  -->
    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script src="./layer/layer.js"></script>
2. layui 模块化使用

在layui文件引入大前提下

layui.use('layer', function(){
  ......
});
各种形式:
layui.use('模块名称', function () {
            var $ = layui.jquery
                , layer = layui.模块名称;
            layer.open({
                //定义的内容
            });
        },
elementUI：
//基于vue
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
vantUI：
<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/vant@2.11/lib/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.11/lib/vant.min.js"></script>

<script>
  // 在 #app 标签下渲染一个按钮组件
  new Vue({
    el: '#app',
    template: `<van-button>按钮</van-button>`,
  });

  // 调用函数组件，弹出一个 Toast
  vant.Toast('提示');

  // 通过 CDN 引入时不会自动注册 Lazyload 组件
  // 可以通过下面的方式手动注册
  Vue.use(vant.Lazyload);
</script>

脚手架模式

bootstrap：
layUI：
//npm安装：
npm i layui-src   

//引入文件
./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js
elementUI：
在脚手架中安装elementUI：

在vueproject中的所在项目安装

安装命令：npm i element-ui -S

安装成功后导入一个：

import Vue from 'vue';

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

vantUI：

安装 Vue Cli

npm install -g @vue/cli

创建一个项目

vue create hello-world

创建完成后，可以通过命令打开图形化界面，如下图所示

vue ui

如图：

创建项目后：在APP根组件导入：

import Vue from 'vue';

import Vant from 'vant';

import 'vant/lib/index.css';

Vue.use(Vant);

二、框架/结构

bootstrap：

栅格布局

划分为12个小格子，进行响应式的布局。

案例：

<div class="row">
       <div class="col-md-4 col-sm-3 col-lg-2">           
            <img src="images/logos.png" alt="" />
       </div>
</div>

​ col-lg-2 ≥992px 大屏幕 摆放6个
​ col-md-3 ≥768px 中等屏幕摆放4个 一般用这个
​ col-sm-4 ≥576px 平板 摆放 三个

宽度
.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

媒体查询：

/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

layUI

栅格布局

划分为12个小格子，进行响应式的布局。

案例：

<div class="layui-container">  
  常规布局（以中型屏幕桌面为例）：
  <div class="layui-row">
    <div class="layui-col-md9">
      你的内容 9/12
    </div>
    <div class="layui-col-md3">
      你的内容 3/12
    </div>
  </div>
</div>

<div class="layui-fluid">//100%自适应
  ……
</div>

elementUI

通过基础的 24 分栏，迅速简便地创建布局。

非响应式：

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

响应式：

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl

<el-row :gutter="10">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col>
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

vantUI：

Layout 组件提供了 24列栅格，通过在 Col 上添加 span 属性设置列所占的宽度百分比。此外，添加 offset 属性可以设置列的偏移宽度，计算方式与 span 相同。

<van-row>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
</van-row>

三、组件

bootstrap：

组件：

警告框、徽章、面包屑导航、按钮、按钮组、卡片、轮播、折叠、下拉菜单、表单、输入组、巨幕、列表组、媒体对象、模态框、导航、导航条、分页、弹出框、进度条、滚动监听、旋转图标、轻量弹框、工具提示框

layUI:

页面元素：

布局、颜色、图标、动画、按钮、表单、导航、选项卡、进度条、面板、表格、徽章、时间线、辅助

内置模块：

弹出层、时间与日期选择、即时通讯、分页、模板引擎、数据表格、表单、文件上传、穿梭框、树形组件、颜色选择器、常用元素操作、滑块、评分、轮播、流加载、工具集、代码修饰器

基本形式：
弹出层
layui.use('layer', function () {
           var $ = layui.jquery
               , layer = layui.layer;
           layer.open({
               //定义的内容
           });
       },
日期与时间选择
layui.use('laydate', function () {
               var laydate = layui.laydate;
               layer.render({
                   //定义的内容
               });
           },
数据表格
layui.use('table', function () {
                   var table = layui.table;
                   table.render({
                       //定义的内容
                   });
               },
分页
layui.use('laypage', function () {
                       var laypage = layui.laypage;
                       laypage.render({
                           //定义的内容
                       })
                   },
文件上传
layui.use('upload', function () {
                           var $ = layui.jquery
                               , upload = layui.upload;
                           upload.render({
                               //定义的内容
                           })
                       },
穿梭框
     layui.use('transfer', function () {
           var $ = layui.$
               , transfer = layui.transfer;
           transfer.render({
               
           })
       },
树形组件
layui.use('tree', function () {
           var tree = layui.tree
               //模拟数据
               , data = [{
                   //定义数据
               }];
           tree.render({
               //内容
           })
       },
颜色选择器
layui.use('colorpicker', function () {
           var $ = layui.$
               , colorpicker = layui.colorpicker;
           //常规使用
           colorpicker.render({
               //内容
           })
       },
滑块
layui.use('slider', function () {
           var $ = layui.$
               , slider = layui.slider;
           //默认滑块
           slider.render({
               //滑块内容
           })
       },
评分
       layui.use(['rate'], function () {
           var rate = layui.rate;
           //基础效果
           rate.render({
               //评分内容
           })
       },
轮播
layui.use(['carousel', 'form'], function () {
           var carousel = layui.carousel
               , form = layui.form;
           //常规轮播
           carousel.render({
               //轮播内容
           });
       },
流加载
layui.use('flow', function () {
           var flow = layui.flow;
           flow.load({
               //流加载内容
           })
       },
工具集
//工具集
layui.use(['util', 'laydate', 'layer'], function () {
           var util = layui.util
               , laydate = layui.laydate
               , $ = layui.$
               , layer = layui.layer;
           //固定块
           util.fixbar({
           }),
               //事件
               util.event('lay-active', {

               }),
       }

elementUI:

基本

Layout布局、 Container 布局容器、Color 色彩、Typography 字体、Border 边框、Icon 图标、Button 按钮、ink 文字链接

关于表单

Radio 单选框、Checkbox 多选框、Input 输入框、InputNumber 计数器、Select 选择器、Cascader 级联选择器、Switch 开关、Slider 滑块、 TimePicker 时间选择器、DatePicker 日期选择器、DateTimePicker 日期时间选择器、Upload 上传、Rate 评分、ColorPicker 颜色选择器、Transfer 穿梭框、Form 表单

关于数据

Table 表格、Tag 标签、Progress 进度条、Tree 树形控件、Pagination 分页、 Badge 标记、Avatar 头像

关于注意提示

Alert 警告vantUI、Loading 加载、Message 消息提示、MessageBox 弹框、Notification 通知

关于导航

NavMenu 导航菜单、Tabs 标签页、Breadcrumb 面包屑、PageHeader 页头、Dropdown 下拉菜单、Steps 步骤条

关于其他

Dialog 对话框、Tooltip 文字提示、Popover 弹出框、Popconfirm 气泡确认框、Card 卡片、Carousel 走马灯、collapse 折叠面板、Timeline 时间线、Divider 分割线、Calendar calendar、Image 图片、Backtop 回到顶部、InfiniteScroll 无限滚动、Drawer 抽屉

vantUI：

基础组件

Button 按钮、Cell 单元格、Icon 图标、Image 图片、Layout 布局、Popup 弹出层、内置样式、Toast 轻提示

表单组件

Calendar 日历、Checkbox 复选框、DatetimePicker 时间选择、Field 输入框、Form 表单、NumberKeyboard 数字键盘、PasswordInput 密码输入框、Picker 选择器、Radio 单选框、Rate 评分、Search 搜索、Slider 滑块、Stepper 步进器、Switch 开关、Uploader 文件上传

反馈组件

ActionSheet 动作面板、Dialog 弹出框、DropdownMenu 下拉菜单、Loading 加载、Notify 消息提示、Overlay 遮罩层、PullRefresh 下拉刷新、ShareSheet 分享面板、SwipeCell 滑动单元格

展示组件

Badge 徽标、Circle 环形进度条、Collapse 折叠面板、CountDown 倒计时、Divider 分割线、Empty 空状态、ImagePreview 图片预览、Lazyload 懒加载、List 列表、NoticeBar 通知栏、Popover 气泡弹出框、Progress 进度条、Skeleton 骨架屏、Steps 步骤条、Sticky 粘性布局、Swipe 轮播、Tag 标签

导航组件

Grid 宫格、IndexBar 索引栏、NavBar 导航栏、Pagination 分页、Sidebar 侧边导航、Tab 标签页、Tabbar 标签栏、TreeSelect 分类选择

业务组件

AddressEdit 地址编辑、AddressList 地址列表、Area 省市区选择、Card 卡片、ContactCard 联系人卡片、ContactEdit 联系人编辑、ContactList 联系人列表、Coupon 优惠券选择器、GoodsAction 商品导航、SubmitBar 提交订单栏、Sku 商品规格

四、功能/特色

bootstrap：

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

  • 它为开发人员创建接口提供了一个简洁统一的解决方案。
  • 它包含了功能强大的内置组件，易于定制。
  • 它还提供了基于 Web 的定制。
  • 它是开源的。

layUI:

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

elementUI:

  • 简化流程：设计简洁直观的操作流程；
  • 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
  • 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

vantUI：

  • 提供 60 多个高质量组件，覆盖移动端各类场景
  • 性能极佳，组件平均体积不到 1kb（min+gzip）
  • 单元测试覆盖率 90%+，提供稳定性保障
  • 完善的中英文文档和示例
  • 支持 Vue 2 & Vue 3
  • 支持按需引入
  • 支持主题定制
  • 支持国际化
  • 支持 TypeScript
  • 支持 SSR
微海报

热门资源

云创动力 云创集训 前端开发工程师 后端开发工程师 四大框架 开发喵 教育生态服务商

相关推荐

评论