45 lines
2.6 KiB
HTML
45 lines
2.6 KiB
HTML
|
---
|
|||
|
|
layout: simple
|
|||
|
|
title: Examples
|
|||
|
|
description: Quickly get a project started with any of our examples ranging from using parts of the framework to custom components and layouts.
|
|||
|
|
redirect_from: "/examples/"
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
{% for entry in site.data.examples %}
|
|||
|
|
<h2>{{ entry.category | capitalize }}</h2>
|
|||
|
|
<p>{{ entry.description }}</p>
|
|||
|
|
{% for example in entry.examples %}
|
|||
|
|
{% if forloop.first %}<div class="row">{% endif %}
|
|||
|
|
<div class="col-sm-6 col-md-4 col-xl-3 mb-3">
|
|||
|
|
<a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/examples/{{ example.name | slugify }}/">
|
|||
|
|
<img class="img-thumbnail mb-3" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png,
|
|||
|
|
{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}@2x.png 2x"
|
|||
|
|
src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png"
|
|||
|
|
alt="{{ example.name }} screenshot" width="480" height="300" loading="lazy">
|
|||
|
|
<h5 class="mb-1">{{ example.name }}</h5>
|
|||
|
|
</a>
|
|||
|
|
<p class="text-muted">{{ example.description }}</p>
|
|||
|
|
</div>
|
|||
|
|
{% if forloop.last %}</div>{% endif %}
|
|||
|
|
{% endfor %}
|
|||
|
|
{% endfor %}
|
|||
|
|
|
|||
|
|
<hr class="my-5">
|
|||
|
|
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="text-center">
|
|||
|
|
<div class="masthead-followup-icon d-inline-block mb-2 text-white bg-danger">
|
|||
|
|
{% include icons/droplet-fill.svg width="32" height="32" %}
|
|||
|
|
</div>
|
|||
|
|
<h2>Go further with Bootstrap Themes</h2>
|
|||
|
|
<p class="col-md-10 mx-auto lead font-weight-normal">
|
|||
|
|
Need something more than these examples? Take Bootstrap to the next level with premium themes from the <a href="{{ site.themes }}">official Bootstrap Themes marketplace</a>. They’re built as their own extended frameworks, rich with new components and plugins, documentation, and powerful build tools.
|
|||
|
|
</p>
|
|||
|
|
<a href="{{ site.themes }}" class="btn btn-lg btn-outline-primary mb-3">Browse themes</a>
|
|||
|
|
</div>
|
|||
|
|
<img class="d-block img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png,
|
|||
|
|
{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage@2x.png 2x"
|
|||
|
|
src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png"
|
|||
|
|
alt="Bootstrap Themes" width="1151" height="320" loading="lazy">
|
|||
|
|
</div>
|