mitsuo_makuda/bootstrap-fluent-design_template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Mateusz 2021-04-29 12:36:33 +02:00 committed by GitHub
parent 0735760a6b
commit 0e7e3df503
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
README.md
View File

@ -1,22 +1,37 @@
# Fluent Design for the newest Bootstrap 5 <p align="center">
Fluent Design from MDB inspired by Microsoft Design <a href="https://mdbootstrap.com/freebies/fluent-design/" target="_blank"><img width="80" src="https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb.png" alt="Material-UI logo"></a></p>
</p>
<a href="https://github.com/mdbootstrap/bootstrap-material-design/blob/master/License.pdf"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a> <h2 align="center">Fluent Design from MDB inspired by Microsoft Design for the newest Bootstrap 5</h2>
________ <p align="center">Components in the newest Bootstrap 5 and Fluent Design. Completely new design using the latest Bootstrap</p>
# Installation
Create, deploy and host anything with a single command using <a href="https://mdbootstrap.com/docs/standard/cli/"><b>open source deployment tool & free hosting</b></a>
There's also <a href="https://mdbootstrap.com/docs/standard/cli/quick-start/"><b>written version</b></a> of quick start available to show the simplicity of using MDB CLI tool.
To start using MDB GO / CLI install it with one command:
```
npm install -g mdb-cli
```
Then run:
```
mdb publish
```
That's it. Your project is available on the Internet.
# Quick Start: # Highlights
**Written Tutorial**: https://mdbootstrap.com/docs/standard/getting-started/quick-start/
**Video Tutorial**: https://www.youtube.com/watch?v=XavTclE2U9Y
________
# Highlights:
**Free for personal and commercial use**
Our license is user friendly. Feel free to use Fluent Kit for both private as well as commercial projects.
**Components** **Components**
Choose **among 100+ predefined components**. Each component is ready to use and fits perfectly with each other like LEGO bricks. Take, combine, enjoy!. Choose **among 100+ predefined components**. Each component is ready to use and fits perfectly with each other like LEGO bricks. Take, combine, enjoy!.
@ -45,14 +60,9 @@ Fluent Kit is integrated with newest jQuery. Therefore you can use all the lates
**SASS files** **SASS files**
Arrenged and well documented .scss files can't wait until you compile them. Arrenged and well documented .scss files can't wait until you compile them.
**Detailed documentation:** **Detailed documentation**
We give you detailed documentation at your disposal. It will help you to implement your ideas easily. We give you detailed documentation at your disposal. It will help you to implement your ideas easily.
**Free for personal and commercial use**
Our license is user friendly. Feel free to use Fluent Kit for both private as well as commercial projects.
A big **thank you to all our users** who are working with us to improve the software. We wouldn't be where we are without you.
# Live Preview # Live Preview
@ -63,7 +73,7 @@ A big **thank you to all our users** who are working with us to improve the soft
<p>Card is a responsive content container with an extensible option for headers, footers, images, and a wide variety of content.</p> <p>Card is a responsive content container with an extensible option for headers, footers, images, and a wide variety of content.</p>
<a href="https://mdbootstrap.com/docs/standard/components/cards/" alt="Fluent Design Bootstrap 5" rel="dofollow"> <a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center"> <p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-cards.png"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-cards.png">
</p> </p>
@ -73,7 +83,7 @@ A big **thank you to all our users** who are working with us to improve the soft
<p>A slideshow component for cycling through elements—images or slides of text—like a carousel.</p> <p>A slideshow component for cycling through elements—images or slides of text—like a carousel.</p>
<a href="https://mdbootstrap.com/docs/standard/components/carousel/" alt="Fluent Design Bootstrap 5" rel="dofollow"> <a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center"> <p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-carousel.gif"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/demo-carousel.gif">
</p> </p>
@ -83,7 +93,7 @@ A big **thank you to all our users** who are working with us to improve the soft
<p>Buttons provide predefined styles (warning, info, danger) for multiple button types: outline, rounded, social, floating, fixed, tags, etc.</p> <p>Buttons provide predefined styles (warning, info, danger) for multiple button types: outline, rounded, social, floating, fixed, tags, etc.</p>
<a href="https://mdbootstrap.com/docs/standard/components/buttons/" alt="Fluent Design Bootstrap 5" rel="dofollow"> <a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center"> <p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-buttons.png"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-buttons.png">
</p> </p>
@ -91,9 +101,9 @@ A big **thank you to all our users** who are working with us to improve the soft
# Button Group # Button Group
<p></p> <p>Button group wraps a series of buttons together into a single line (navbar) or stack in a vertical column.</p>
<a href="https://mdbootstrap.com/docs/standard/components/button-group/" alt="Fluent Design Bootstrap 5" rel="dofollow"> <a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center"> <p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-button-group.png"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-button-group.png">
</p> </p>
@ -104,7 +114,7 @@ A big **thank you to all our users** who are working with us to improve the soft
<p>Progress bar is an indicator showing the completion progress, i.e. task or time. Use it with percents, steps & other options.</p> <p>Progress bar is an indicator showing the completion progress, i.e. task or time. Use it with percents, steps & other options.</p>
<a href="https://mdbootstrap.com/docs/standard/components/progress/" alt="Fluent Design Bootstrap 5" rel="dofollow"> <a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center"> <p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-progress.png"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-progress.png">
</p> </p>
@ -114,7 +124,7 @@ A big **thank you to all our users** who are working with us to improve the soft
<p>A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.</p> <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/standard/navigation/footer/" alt="Fluent Design Bootstrap 5" rel="dofollow"> <a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center"> <p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-footer.png"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-footer.png">
</p> </p>
@ -124,7 +134,7 @@ A big **thank you to all our users** who are working with us to improve the soft
<p>Bootstrap Toast component is a non-disruptive message in the corner of the interface. It provides quick "at-a-glance" feedback on the outcome of an action.</p> <p>Bootstrap Toast component is a non-disruptive message in the corner of the interface. It provides quick "at-a-glance" feedback on the outcome of an action.</p>
<a href="https://mdbootstrap.com/docs/standard/components/toasts/" alt="Fluent Design Bootstrap 5" rel="dofollow"> <a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center"> <p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-toasts.png"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-toasts.png">
</p> </p>
@ -132,13 +142,13 @@ A big **thank you to all our users** who are working with us to improve the soft
# Acrylic # Acrylic
<a href="https://mdbootstrap.com/articles/web-design/using-the-glassmorphism-ui-trend-in-your-web-project/" alt="Fluent Design Bootstrap 5" rel="dofollow"> <a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center"> <p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-blur-1.png"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-blur-1.png">
</p> </p>
</a> </a>
<a href="https://mdbootstrap.com/articles/web-design/using-the-glassmorphism-ui-trend-in-your-web-project/" alt="Fluent Design Bootstrap 5" rel="dofollow"> <a href="https://mdbootstrap.com/freebies/fluent-design/" alt="Fluent Design Bootstrap 5" rel="dofollow">
<p align="center"> <p align="center">
<img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-blur-2.png"> <img src="https://mdbootstrap.com/img/Marketing/campaigns/fluent-blur-2.png">
</p> </p>
@ -147,5 +157,3 @@ A big **thank you to all our users** who are working with us to improve the soft
A big **thank you to all our users** who are working with us to improve the software. We wouldn't be where we are without you. A big **thank you to all our users** who are working with us to improve the software. We wouldn't be where we are without you.