架构
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"> <!-- 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>
- 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 - 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="https://antdv.com" 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="https://v3.bootcss.com/getting-started/">Bootstrap3开发文档</a> <a href="https://www.antdv.com/docs/vue/introduce-cn/">Ant Design Of Vue</a>
