2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00

v4: Update homepage, examples, and general docs styles

- Refreshes the look and feel of the homepage with fresh colors, new content, and simplified styles.
- Updates docs button styles
- Replaces bytesize icons with Bootstrap icons
- Adds themes callout to examples page
This commit is contained in:
Mark Otto
2020-05-10 00:33:01 +03:00
committed by Mark Otto
parent 4111242cbb
commit a1d8ed4413
20 changed files with 172 additions and 72 deletions
+21 -1
View File
@@ -14,7 +14,8 @@ redirect_from: "/examples/"
<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">
src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png"
alt="{{ example.name }} screenshot" width="480" height="300">
<h5 class="mb-1">{{ example.name }}</h5>
</a>
<p class="text-muted">{{ example.description }}</p>
@@ -22,3 +23,22 @@ redirect_from: "/examples/"
{% 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">
</div>