前端组件之Bootstrap与Ant design of Vue

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 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 - 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>