使用Bootstrap 4设计系统开始开发

Vue Argon设计系统 (Vue Argon Design System)

Start your development with a Design System for Bootstrap 4. It is open source, free and it features many components that can help you create amazing websites.

从用于Bootstrap 4的设计系统开始开发。它是免费的开源软件，并且具有许多可帮助您创建出色网站的组件。

全编码组件 (Fully Coded Components)

Vue Argon Design System is built with over 100 individual components, giving you the freedom of choosing and combining. All components can take variations in colour, that you can easily modify using SASS files.

Vue Argon设计系统由100多个独立组件组成，可让您自由选择和组合。 所有组件的颜色都可能不同，您可以使用SASS文件轻松进行修改。

You will save a lot of time going from prototyping to full-functional code, because all elements are implemented. This Design System is coming with prebuilt examples, so the development process is seamless, switching from our pages to the real website is very easy to be done.

因为所有元素都已实现，所以从原型制作到功能齐全的代码，您将节省大量时间。 该设计系统附带了预先构建的示例，因此开发过程是无缝的，从我们的页面切换到真实的网站非常容易。

Every element has multiple states for colors, styles, hover, focus, that you can easily access and use.

每个元素都有颜色，样式，悬停，焦点的多种状态，您可以轻松访问和使用。

复杂文件 (Complex Documentation)

Each element is well presented in a very complex documentation. You can read more about the idea behind this design system here. You can check the components here and the foundation here.

每个元素在非常复杂的文档中都有很好的呈现。 您可以在此处阅读有关此设计系统背后思想的更多信息。 您可以在此处检查组件，并在此处检查基础。

示例页面 (Example Pages)

If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.

如果您想获得灵感或直接向客户展示一些东西，可以通过我们预先构建的示例页面快速开始开发。 您将能够快速设置Web项目的基本结构。

演示版 (Demo)

• Index Page

  索引页

• Landing page

  登陆页面

• Profile Page

  个人资料页

• Login Page

  登录页面

• Register Page

  注册页面

View More

查看更多

快速开始 (Quick start)

• Download from Github.

  从Github下载 。

• Download from Creative Tim.

  从Creative Tim下载 。

• Clone the repo: git clone https://github.com/creativetimofficial/argon-design-system.git.

  克隆仓库： git clone https://github.com/creativetimofficial/argon-design-system.git 。

文献资料 (Documentation)

The documentation for the Vue Argon Design System is hosted at our website.

Vue Argon设计系统的文档位于我们的网站上 。

档案结构 (File Structure)

Within the download you’ll find the following directories and files:

在下载中，您将找到以下目录和文件：

argon/
|-- vue-argon-design-system
    |-- App.vue
    |-- main.js
    |-- router.js
    |-- assets
    |   |-- scss
    |   |   |-- argon.scss
    |   |   |-- bootstrap
    |   |   |-- custom
    |   |-- vendor
    |       |-- font-awesome
    |       |   |-- css
    |       |   |   |-- font-awesome.css
    |       |   |   |-- font-awesome.min.css
    |       |   |-- fonts
    |       |       |-- FontAwesome.otf
    |       |       |-- fontawesome-webfont.eot
    |       |       |-- fontawesome-webfont.svg
    |       |       |-- fontawesome-webfont.ttf
    |       |       |-- fontawesome-webfont.woff
    |       |       |-- fontawesome-webfont.woff2
    |       |-- nucleo
    |           |-- css
    |           |   |-- nucleo-svg.css
    |           |   |-- nucleo.css
    |           |-- fonts
    |               |-- nucleo-icons.eot
    |               |-- nucleo-icons.svg
    |               |-- nucleo-icons.ttf
    |               |-- nucleo-icons.woff
    |               |-- nucleo-icons.woff2
    |-- components
    |   |-- Badge.vue
    |   |-- BaseButton.vue
    |   |-- BaseCheckbox.vue
    |   |-- BaseInput.vue
    |   |-- BaseNav.vue
    |   |-- BaseRadio.vue
    |   |-- BaseSlider.vue
    |   |-- BaseSwitch.vue
    |   |-- Card.vue
    |   |-- CloseButton.vue
    |   |-- Icon.vue
    |   |-- NavbarToggleButton.vue
    |-- layout
    |   |-- AppFooter.vue
    |   |-- AppHeader.vue
    |-- plugins
    |   |-- argon-kit.js
    |   |-- globalComponents.js
    |   |-- globalDirectives.js
    |-- views
        |-- Components.vue
        |-- Landing.vue
        |-- Login.vue
        |-- Profile.vue
        |-- Register.vue
        |-- components
            |-- BasicElements.vue
            |-- Carousel.vue
            |-- CustomControls.vue
            |-- DownloadSection.vue
            |-- Examples.vue
            |-- Hero.vue
            |-- Icons.vue
            |-- Inputs.vue
            |-- JavascriptComponents.vue
            |-- Navigation.vue

浏览器支持 (Browser Support)

At present, we officially aim to support the last two versions of the following browsers:

目前，我们正式旨在支持以下浏览器的最后两个版本：

翻译自: https://vuejsexamples.com/start-your-development-with-a-design-system-for-bootstrap-4/