0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-26 23:54:23 +01:00

Add loading="lazy" in images

Backport of #30199 after adapting it for v4-dev.
This commit is contained in:
XhmikosR 2020-05-10 08:13:02 +03:00 committed by Mark Otto
parent a1d8ed4413
commit 345d68cdbb
5 changed files with 12 additions and 12 deletions

View File

@ -14,10 +14,10 @@ Use either the Bootstrap mark (a capital **B**) or the standard logo (just **Boo
<div class="bd-brand-logos"> <div class="bd-brand-logos">
<div class="bd-brand-item"> <div class="bd-brand-item">
<img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144"> <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
</div> </div>
<div class="bd-brand-item inverse"> <div class="bd-brand-item inverse">
<img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144"> <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
</div> </div>
</div> </div>
<div class="bd-brand-logos"> <div class="bd-brand-logos">
@ -35,13 +35,13 @@ Download the Bootstrap mark in one of three styles, each available as an SVG fil
<div class="bd-brand-logos"> <div class="bd-brand-logos">
<div class="bd-brand-item"> <div class="bd-brand-item">
<img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144"> <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
</div> </div>
<div class="bd-brand-item inverse"> <div class="bd-brand-item inverse">
<img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144"> <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-outline.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
</div> </div>
<div class="bd-brand-item inverse"> <div class="bd-brand-item inverse">
<img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144"> <img class="svg" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-punchout.svg" alt="Bootstrap" width="144" height="144" loading="lazy">
</div> </div>
</div> </div>

View File

@ -10,7 +10,7 @@ Bootstrap is maintained by the founding team and a small group of invaluable cor
<div class="list-group mb-3"> <div class="list-group mb-3">
{% for member in site.data.core-team %} {% for member in site.data.core-team %}
<a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/{{ member.user }}"> <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/{{ member.user }}">
<img src="https://github.com/{{ member.user }}.png" alt="@{{ member.user }}" width="32" height="32" class="rounded mr-2"> <img src="https://github.com/{{ member.user }}.png" alt="@{{ member.user }}" width="32" height="32" class="rounded mr-2" loading="lazy">
<span> <span>
<strong>{{ member.name }}</strong> @{{ member.user }} <strong>{{ member.name }}</strong> @{{ member.user }}
</span> </span>

View File

@ -98,7 +98,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
<!-- Just an image --> <!-- Just an image -->
<nav class="navbar navbar-light bg-light"> <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""> <img src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="" loading="lazy">
</a> </a>
</nav> </nav>
{% endcapture %} {% endcapture %}
@ -108,7 +108,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
<!-- Image and text --> <!-- Image and text -->
<nav class="navbar navbar-light bg-light"> <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> <img src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
Bootstrap Bootstrap
</a> </a>
</nav> </nav>

View File

@ -15,7 +15,7 @@ redirect_from: "/examples/"
<img class="img-thumbnail mb-3" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png, <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" {{ 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" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/examples/{{ example.name | slugify }}.png"
alt="{{ example.name }} screenshot" width="480" height="300"> alt="{{ example.name }} screenshot" width="480" height="300" loading="lazy">
<h5 class="mb-1">{{ example.name }}</h5> <h5 class="mb-1">{{ example.name }}</h5>
</a> </a>
<p class="text-muted">{{ example.description }}</p> <p class="text-muted">{{ example.description }}</p>
@ -40,5 +40,5 @@ redirect_from: "/examples/"
<img class="d-block img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png, <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" {{ 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" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes-collage.png"
alt="Bootstrap Themes" width="1151" height="320"> alt="Bootstrap Themes" width="1151" height="320" loading="lazy">
</div> </div>

View File

@ -96,7 +96,7 @@ gem install bootstrap -v {{ site.current_ruby_version }}
<img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png, <img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png,
{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons@2x.png 2x" {{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons@2x.png 2x"
src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-icons.png"
alt="Bootstrap Icons" width="966" height="600"> alt="Bootstrap Icons" width="966" height="600" loading="lazy">
</div> </div>
</div> </div>
@ -118,7 +118,7 @@ gem install bootstrap -v {{ site.current_ruby_version }}
<img class="img-fluid mt-3 mx-auto" srcset="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png, <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" {{ 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" src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/img/bootstrap-themes.png"
alt="Bootstrap Themes" width="700" height="500"> alt="Bootstrap Themes" width="700" height="500" loading="lazy">
</div> </div>
</div> </div>
</div> </div>