0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-17 09:52:29 +01:00

homepage: use srcset.

This should reduce the amount of bytes for non-2x displays.
This commit is contained in:
XhmikosR 2018-11-15 08:22:10 +02:00
parent fcfa436a31
commit d5279bf18c
5 changed files with 6 additions and 2 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

View File

@ -6,7 +6,9 @@ layout: home
<div class="container"> <div class="container">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-6 mx-auto col-md-6 order-md-2"> <div class="col-6 mx-auto col-md-6 order-md-2">
<img class="img-fluid mb-3 mb-md-0" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-stack.png" alt="" width="1024" height="860"> <img class="img-fluid mb-3 mb-md-0" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-stack.png,
{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-stack@2x.png 2x"
src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-stack.png" alt="" width="512" height="430">
</div> </div>
<div class="col-md-6 order-md-1 text-center text-md-left pr-md-5"> <div class="col-md-6 order-md-1 text-center text-md-left pr-md-5">
<h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1> <h1 class="mb-3 bd-text-purple-bright">Bootstrap</h1>
@ -80,7 +82,9 @@ gem install bootstrap -v {{ site.current_ruby_version }}
<p> <p>
Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools. Take Bootstrap 4 to the next level with official premium themes—toolkits built on Bootstrap with new components and plugins, docs, and build tools.
</p> </p>
<img class="img-fluid mt-3 mx-auto" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="1024" height="388"> <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png,
{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes@2x.png 2x"
src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png" alt="Bootstrap Themes" width="500" height="200">
<hr class="half-rule"> <hr class="half-rule">
<a href="{{ site.themes }}/" class="btn btn-outline-primary">Browse themes</a> <a href="{{ site.themes }}/" class="btn btn-outline-primary">Browse themes</a>
</div> </div>