mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
115 lines
6.1 KiB
HTML
115 lines
6.1 KiB
HTML
---
|
|
layout: home
|
|
title: Bootstrap Material Design, the world's most popular mobile-first and responsive Material Design front-end framework.
|
|
---
|
|
|
|
<main class="bd-masthead" id="content" role="main">
|
|
<div class="container">
|
|
<span class="bd-booticon outline">BMD</span>
|
|
<p class="lead">Bootstrap Material Design, the world's most popular mobile-first and responsive Material Design front-end framework.</p>
|
|
<p class="lead">
|
|
<a href="{{ site.baseurl }}/getting-started/download" class="btn btn-primary btn-raised btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download {{ site.data.version }}');">Download</a>
|
|
</p>
|
|
<p class="version">Currently v{{ site.data.version }}</p>
|
|
{% include ads.html %}
|
|
</div>
|
|
</main>
|
|
|
|
<div class="bd-featurette">
|
|
<div class="container">
|
|
<h2 class="bd-featurette-title">Easy to get started.</h2>
|
|
<p class="lead">Quickly include Bootstrap Material Design's CSS and JS into any project. Use your favorite package manager, download the source, or use the Bootstrap Material Design CDN.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-6 m-b-lg">
|
|
<h4>Managed dependencies</h4>
|
|
<p>Include Bootstrap Material Design's source Sass and JavaScript files via Bower, Composer, Meteor, or npm. Package managed installs don't include documentation, but do include our gulpfile and readme.</p>
|
|
<p>
|
|
<a class="btn btn-bs btn-primary" href="{{ site.baseurl }}/getting-started/download/#package-managers">View install methods</a>
|
|
</p>
|
|
</div>
|
|
<div class="col-sm-6 m-b-lg">
|
|
<h4>Bootstrap Material Design CDN</h4>
|
|
<p>When you just need to include Bootstrap Material Design's compiled CSS and JS, use the Bootstrap Material Design CDN, free from the Max CDN folks.</p>
|
|
<p>
|
|
<a class="btn btn-bs btn-primary" href="{{ site.baseurl }}/getting-started/introduction">See Getting Started</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bd-featurette">
|
|
<div class="container">
|
|
<h2 class="bd-featurette-title">Material Kit <span class="mk-pro-badge">PRO</span></h2>
|
|
<p class="lead">
|
|
Get more from Bootstrap Material Design with our official Material Kit PRO. It features a huge number of components built to fit together and look amazing. Included you will find PSD, examples and sources.
|
|
</p>
|
|
|
|
<p class="lead">
|
|
<a href="{{ site.mkp }}" class="btn btn-outline-primary btn-lg" onclick="ga('send', 'event', 'Home', 'MKP More Details Button');">More details</a>
|
|
</p>
|
|
|
|
<a href="{{ site.mkp }}" onclick="ga('send', 'event', 'Home', 'MKP Banner Link');">
|
|
<img class="img-fluid m-x-auto" src="assets/img/mk-pro-banner.jpg" alt="Material Kit PRO" width="1024" height="388">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bd-featurette">
|
|
<div class="container">
|
|
<h2 class="bd-featurette-title">Designed for everyone, everywhere.</h2>
|
|
<p class="lead">Bootstrap Material Design makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-4 m-b-lg">
|
|
<img src="assets/img/sass.png" alt="Sass support" class="img-fluid">
|
|
<h4>Preprocessor</h4>
|
|
<p>Bootstrap Material Design ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
|
|
</div>
|
|
<div class="col-sm-4 m-b-lg">
|
|
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-fluid">
|
|
<h4>One framework, every device.</h4>
|
|
<p>Bootstrap Material Design easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
|
|
</div>
|
|
<div class="col-sm-4 m-b-lg">
|
|
<img src="assets/img/components.png" alt="Components" class="img-fluid">
|
|
<h4>Full of features</h4>
|
|
<p>With Bootstrap Material Design, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="half-rule m-t-0">
|
|
|
|
<p><strong>Bootstrap Material Design is open source!</strong> It's hosted, developed, and maintained on GitHub by folks like you.</p>
|
|
<a href="{{ site.repo }}" class="btn btn-bs btn-primary" onclick="ga('send', 'event', 'Home', 'GitHub Button');">View the GitHub project</a>
|
|
|
|
<br /><br />
|
|
<hr class="half-rule m-t-0">
|
|
|
|
<p>Looking for the <strong>Bootstrap 3 compatible</strong> version of Bootstrap Material Design? Head over the following link to find it.</p>
|
|
<a class="btn btn-bs btn-primary" href="https://cdn.rawgit.com/FezVrasta/bootstrap-material-design/gh-pages-v3/index.html" onclick="ga('send', 'event', 'Home', 'Bootstrap Material Design V3 Button');">Get BMD3 Version</a>
|
|
|
|
<br /><br />
|
|
<hr class="half-rule m-t-0">
|
|
|
|
<p>Would you like to support the development of Bootstrap Material Design? Please donate with PayPal or buy <a href="{{ site.mkp }}" target="_blank" onclick="ga('send', 'event', 'Home', 'MKP Support Button');">Material Kit PRO</a>!</p>
|
|
<form action="https://www.paypal.com/cgi-bin/webscr" id="paypal" method="post" target="_blank">
|
|
<input type="hidden" name="cmd" value="_s-xclick">
|
|
|
|
<div class="btn" style="padding: 0;">
|
|
<select class="btn btn-success btn-raised custom-select" style="margin-left: 1em;" name="hosted_button_id" title="I can't accept less than 5 euro due to accounting troubles">
|
|
<option value="DAAK965W2DKYE">€ 5,00</option>
|
|
<option value="28PH77JK5QWFE">€ 10,00</option>
|
|
<option value="6B6TJAJ2R99HS">€ 15,00</option>
|
|
<option value="GJCEKCQFMBVHA">€ 20,00</option>
|
|
<option value="U7QXM95C8RJ9W">€ 25,00</option>
|
|
<option value="55S3VBB3U4NAS">€ 50,00</option>
|
|
</select>
|
|
<input type="submit" style="background: none; border: 0; margin: 1em;" value="DONATE WITH PAYPAL" name="submit">
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|