Vue 3 & Bootstrap 5 & Material Design 2.0 UI 工具包.zip

Bootstrap 5 & Vue 3 UI KIT - 700+ components, MIT license, simple installation. MDB is a collection of free Bootstrap templates, themes, design tools & resources. --- # Get started ### [>> Get Started in 1 minute](https://mdbootstrap.com/docs/b5/vue/getting-started/installation/) Simple installation via .zip, npm or cdnjs. ### [>> Install with MDBGO](https://mdbgo.com/) Free Hosting, WordPress support, custom domains, SSL support, free database, frontend & backend templates, webpack starter included, git repostiory, FTP & jenkins support. ### [>> Install with MDBGO + e-commerce shop integration](https://mdbgo.com/wordpress-shop/) One click setup! MDB GO allows you to create a WordPress page with a single click. Regardless whether you want to create a Travel Blog or an e-commerce shop to sell your product you can easily do that. You can even combine both into single page. ## About Material Design for Bootstrap 5 & Vue 3 <p>Created by <a href="https://mdbootstrap.com"><img height="30" src="https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-vue-r.png"></a> <a href="https://npmcharts.com/compare/mdbvue?minimal=true"> <img src="https://img.shields.io/npm/dm/mdbootstrap.svg?label=NPM%20Downloads" alt="Downloads"></a> <a href="https://github.com/mdbootstrap/mdb-vue-ui-kit/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a> <a href="https://x.com/intent/post?text=Thanks+%40mdbootstrap+for+creating+amazing+and+free+Material+Design+for+Bootstrap+5+UI+KIT+https%3A%2F%2Fmdbootstrap.com%2Fdocs%2Fjquery%2F&hashtags=javascript%2Ccode%2Cwebdesign%2Cbootstrap"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a> <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/"> <img src="https://img.shields.io/static/v1?label=MDBootstrap&message=Tutorial&labelColor=007bff&color=ffffff&logoColor=007bff&textColor=000000" alt="MDBootstrap tutorial"> </a></p> Trusted by <b>3 000 000+</b> developers & designers. Used by companies & institutions like <table> <tbody> <tr> <td><img width="300" src="https://mdbootstrap.com/img/logo/brands/nasa.png"></td> <td><img src="https://mdbootstrap.com/img/logo/brands/nike.png"></td> <td><img src="https://mdbootstrap.com/img/logo/brands/amazon.png"></td> <td><img src="https://mdbootstrap.com/img/logo/brands/sony.png"></td> <td><img src="https://mdbootstrap.com/img/logo/brands/samsung.png"> <td><img src="https://mdbootstrap.com/img/logo/brands/airbus.png"> <td><img src="https://mdbootstrap.com/img/logo/brands/yahoo.png"> <td><img src="https://mdbootstrap.com/img/logo/brands/deloitte.png"> <td><img src="https://mdbootstrap.com/img/logo/brands/ge.png"> <td><img src="https://mdbootstrap.com/img/logo/brands/kpmg.png"> <td><img src="https://mdbootstrap.com/img/logo/brands/unity.png"> <td><img src="https://mdbootstrap.com/img/logo/brands/ikea.png"> <td><img src="https://mdbootstrap.com/img/logo/brands/aegon.png"> </tr> </tbody> </table> <table> <tbody> <tr> <td> <a href="https://mdbootstrap.com/docs/b5/vue/" alt="Bootstrap 5" rel="dofollow"> <img src="https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/en/_mdb5/vue/about/assets/mdb5-vue.jpg"> </a> </td> <td> <ul> <li><b><a href="https://mdbootstrap.com/docs/b5/vue/">700+ UI components</a></b></li> <li>Super simple, 1 minute installation</li> <li>Detailed docs & practical examples</li> <li>Lots of tutorials</li> <li>Huge and active community</li> <li><b>MIT license - free for personal & commercial use</b></li> </ul> </td> </tr> </tbody> </table> ___ # Bootstrap 5 tutorial **[>> Learn more about Bootstrap 5](https://mdbootstrap.com/docs/standard/)** **[>> Bootstrap 5 Tutorial](https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/)** **[>> Subscribe to our YouTube channel with dozens of Bootstrap tutorials](https://www.youtube.com/c/Mdbootstrap)** <table> <tbody> <tr> <td align="center"> <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/" alt="Bootstrap Tutorials" rel="dofollow"> <img src="https://mdbootstrap.com/wp-content/uploads/2020/12/learnmore-1.png"> </a> </td> <td> <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/#section-beginner" alt="Bootstrap 5" rel="dofollow"> <img src="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/assets/featured-image.png"> </a> </td> </tr> <tr> <td align="center"> <p align="center"><b>Start learning from Basics</b></p> <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/" alt="Bootstrap 5" rel="dofollow"> <img src="https://mdbootstrap.com/wp-content/uploads/2020/12/Screenshot_26.png"> </a> </td> <td align="center"> <p align="center"><b>Learn Bootstrap 5 | Crash Course for Beginners in 1.5H</b></p> <a href="https://mdbootstrap.com/learn/mdb-foundations/basics/introduction/#section-beginner" alt="Bootstrap 5" rel="dofollow"> <img src="https://mdbootstrap.com/wp-content/uploads/2020/12/Screenshot_26.png"> </a> </td> </tr> </tbody> </table> --- # Demo #### Simplicity and ease of use are key features of MDB 5 Vue UI Kit. You need only one minute to install and run it. ### Buttons <p>Use MDB custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p> <a href="https://mdbootstrap.com/docs/b5/vue/components/buttons/" alt="Bootstrap 5" rel="dofollow"> <p align="center"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-buttons.gif"> </p> </a> <a href="https://mdbootstrap.com/docs/b5/vue/components/buttons/" alt="Bootstrap 5" rel="dofollow"> <p align="center"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-social-buttons.png"> </p> </a> <a href="https://mdbootstrap.com/docs/b5/vue/components/buttons/" alt="Bootstrap 5" rel="dofollow"> <p align="center"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-buttons2.png"> </p> </a> <a href="https://mdbootstrap.com/docs/b5/vue/components/buttons/" alt="Bootstrap 5" rel="dofollow"> <p align="center"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-buttons-outline.gif"> </p> </a> ### Spinners <p>Indicate the loading state of a component or page with MDB spinners, built entirely with HTML, CSS, and no JavaScript.</p> <a href="https://mdbootstrap.com/docs/b5/vue/components/spinners/" alt="Bootstrap 5" rel="dofollow"> <p align="center"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-loader.gif"> </p> </a> <a href="https://mdbootstrap.com/docs/b5/vue/components/spinners/" alt="Bootstrap 5" rel="dofollow"> <p align="center"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-color-spinners.gif"> </p> </a> ### Cards <p>A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p> <a href="https://mdbootstrap.com/docs/b5/vue/components/cards/" alt="Bootstrap 5" rel="dofollow"> <p align="center"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-cards.png"> </p> </a> ### Footer <p>A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.</p> <a href="https://mdbootstrap.com/docs/b5/vue/navigation/footer/" alt="Bootstrap 5" rel="dofollow"> <p align="center"> <im