0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-14 02:24:00 +01:00
Bootstrap/site/docs/4.4/examples/index.html
XhmikosR 345d68cdbb Add loading="lazy" in images
Backport of #30199 after adapting it for v4-dev.
2020-05-10 12:19:58 -07:00

45 lines
2.6 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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>. Theyre 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>