架构
1、前言2、Bootstra跟Ant design对比2.1 简介2.1.1 Bootstrap2.1.2 Ant design 2.2 特性2.2.1 Bootstrap2.2.2 Ant Design Of Vue 2.3 入门条件BootstrapAnt 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.js2、页面的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 和 ES，并正确安装和配置了 Node.js v8.9 或以上。官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识，并且已经完全掌握了 Vue 的正确开发方式。如果你刚开始学习前端或者 Vue，将 UI 框架作为你的第一步可能不是最好的主意。 使用了大量ES6的新特性，要懂得ES6的部分新功能（比如说箭头函数），才好理解代码。使用HTML5的部分新特性开发需要掌握Vue2.4 部分组件的显示效果以及代码
2.4.1 导航条
BScode<nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><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 navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><!-- Collect the nav links, forms, and other content for toggling --><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="#">Link</a></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="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></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">Submit</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></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="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav>
Antcode
<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 - Submenu</span><a-menu-item-group title="Item 1"><a-menu-item key="setting:1">Option 1</a-menu-item><a-menu-item key="setting:2">Option 2</a-menu-item></a-menu-item-group><a-menu-item-group title="Item 2"><a-menu-item key="setting:3">Option 3</a-menu-item><a-menu-item key="setting:4">Option 4</a-menu-item></a-menu-item-group></a-sub-menu><a-menu-item key="alipay"><a href="" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a></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 more</a></p></div>
Ant没找到组件，希望有人找到，通知我一声，我更新
2.5 栅格系统
Bootstrap 采用的是十二格换一行。col-Ant 采用24格换一行。col-3、两个强大组件库的一些共性
1、都提供了大量的模板组件2、在开发文档中中都提供了组件的基本显示效果，以及代码总而言之
两个组件库，都很强大，Bootstrap的组件相对而言更多一点，入门条件也比较低。
<!--参考链接--><a href="/getting-started/">Bootstrap3开发文档</a><a href="/docs/vue/introduce-cn/">Ant Design Of Vue</a>
