前端组件之Bootstrap与Ant design of Vue

架构

• 1、前言
• 2、Bootstra跟Ant design对比
• • 2.1 简介
  • • 2.1.1 Bootstrap
    • 2.1.2 Ant design
  • 2.2 特性
  • • 2.2.1 Bootstrap
    • 2.2.2 Ant Design Of Vue
  • 2.3 入门条件
  • • Bootstrap
    • Ant Design Of Vue
  • 2.4 部分组件的显示效果以及代码
  • • 2.4.1 导航条
    • 2.4.2 巨幕
  • 2.5 栅格系统
• 3、两个强大组件库的一些共性
• 总而言之

1、前言

本文仅面向前端初始学习者，当然也欢迎大犇来指正其中错误

• 玩前端的新手，或多或少地会见过并使用前端里的各种框架，其中又以Vue跟React为热门话题，每次问小度娘“前端”，她都会给我们回各种Vue跟React的广告。那么不知大家是否听说过Bootstrap以及Ant design两个超级强大的组件库？下面一起来了解一下吧。

2、Bootstra跟Ant design对比

2.1 简介

2.1.1 Bootstrap

• Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。

2.1.2 Ant design

• Ant Design 设计价值观为设计者提供评价设计好坏的内在标准，启示并激发了 Ant Design 设计原则和设计模式，进而为具体设计问题提供向导和一般解决方案。

2.2 特性

2.2.1 Bootstrap

• 1、BS 是基于Jquery开发的，也就是说，在引入BS之前必须先引入Jquery.js
• 2、页面的js操作可以全部使用Jquery，以简化操作
• 3、BS 的兼容性做得相对于其他组件库，要好一点。而且在现代的桌面浏览器上有极佳的表现(包括IE7！)。在平板电脑和智能手机上面还有 响应式CSS 可以使用。
• 4、Bootstrap 提供了全面、美观的文档。在官网里还能找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档。
• 5、BS 提供的栅格系统非常方便我们做响应式局面。

2.2.2 Ant Design Of Vue

• 1、提炼自企业级中后台产品的交互语言和视觉风格。
• 2、开箱即用的高质量 Vue 组件。
• 3、共享Ant Design of React设计工具体系。

2.3 入门条件

Bootstrap

• 只要会Jquery的基本操作就可以看懂代码，实现组件更新为自己的组件

Ant Design Of Vue

• 在ADV开发文档的开头写的很清楚
  • 在开始之前，推荐先学习 Vue 和 ES2015，并正确安装和配置了 Node.js v8.9 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 Vue 的正确开发方式。如果你刚开始学习前端或者 Vue，将 UI 框架作为你的第一步可能不是最好的主意。
• 使用了大量ES6的新特性，要懂得ES6的部分新功能（比如说箭头函数），才好理解代码。
• 使用HTML5的部分新特性开发
• 需要掌握Vue

2.4 部分组件的显示效果以及代码

2.4.1 导航条

• BS
• 
• code

<nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigationspan><span class="icon-bar">span><span class="icon-bar">span><span class="icon-bar">span>button><a class="navbar-brand" href="#">Branda>div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">Link <span class="sr-only">(current)span>a>li><li><a href="#">Linka>li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a><ul class="dropdown-menu"><li><a href="#">Actiona>li><li><a href="#">Another actiona>li><li><a href="#">Something else herea>li><li role="separator" class="divider">li><li><a href="#">Separated linka>li><li role="separator" class="divider">li><li><a href="#">One more separated linka>li>ul>li>ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search">div><button type="submit" class="btn btn-default">Submitbutton>form><ul class="nav navbar-nav navbar-right"><li><a href="#">Linka>li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret">span>a><ul class="dropdown-menu"><li><a href="#">Actiona>li><li><a href="#">Another actiona>li><li><a href="#">Something else herea>li><li role="separator" class="divider">li><li><a href="#">Separated linka>li>ul>li>ul>div>div>
nav>

• Ant
• 
• code

<template><div><a-menu v-model="current" mode="horizontal"><a-menu-item key="mail"> <a-icon type="mail" />Navigation One a-menu-item><a-menu-item key="app" disabled> <a-icon type="appstore" />Navigation Two a-menu-item><a-sub-menu><span slot="title" class="submenu-title-wrapper"><a-icon type="setting" />Navigation Three - Submenuspan><a-menu-item-group title="Item 1"><a-menu-item key="setting:1">Option 1a-menu-item><a-menu-item key="setting:2">Option 2a-menu-item>a-menu-item-group><a-menu-item-group title="Item 2"><a-menu-item key="setting:3">Option 3a-menu-item><a-menu-item key="setting:4">Option 4a-menu-item>a-menu-item-group>a-sub-menu><a-menu-item key="alipay"><a href="https://antdv.com" target="_blank" rel="noopener noreferrer">Navigation Four - Linka>a-menu-item>a-menu>div>
template>
<script>
export default {data() {return {current: ['mail'],};},
};
script>

2.4.2 巨幕

• Bs
• 

<div class="jumbotron"><h1>Hello, world!h1><p>...p><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn morea>p>
div>

• Ant
• 没找到组件，希望有人找到，通知我一声，我更新

2.5 栅格系统

• Bootstrap 采用的是十二格换一行。col-
• Ant 采用24格换一行。col-

3、两个强大组件库的一些共性

• 1、都提供了大量的模板组件
• 2、在开发文档中中都提供了组件的基本显示效果，以及代码

总而言之

两个组件库，都很强大，Bootstrap的组件相对而言更多一点，入门条件也比较低。

<a href="https://v3.bootcss.com/getting-started/">Bootstrap3开发文档a>
<a href="https://www.antdv.com/docs/vue/introduce-cn/">Ant Design Of Vuea>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！