mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00
Code Activity

Replace holder.js with SVGs.

Browse Source
This commit is contained in:
Martijn Cuppens
2018-11-08 19:33:02 +02:00
committed by XhmikosR
parent b04f97f60b
commit 072b5ab7fd
12 changed files with 130 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/docs/4.1/content/figures.md
+2 -2
View File
@@ -11,7 +11,7 @@ Use the included `.figure` , `.figure-img` and `.figure-caption` classes to prov
{% capture example %}
<figure class="figure">
<img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
{% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" title="A generic square placeholder image with rounded corners in a figure." %}
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
{% endcapture %}
@@ -21,7 +21,7 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl
{% capture example %}
<figure class="figure">
<img data-src="holder.js/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
{% include icons/placeholder.svg width="400" height="300" class="figure-img img-fluid rounded" title="A generic square placeholder image with rounded corners in a figure." %}
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>
{% endcapture %}
site/docs/4.1/content/images.md
+6 -6
View File
@@ -11,7 +11,7 @@ toc: true
Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
<div class="bd-example">
<img data-src="holder.js/100px250" class="img-fluid" alt="Generic responsive image">
{% include icons/placeholder.svg width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" title="Generic responsive image" %}
</div>
{% highlight html %}
@@ -30,7 +30,7 @@ In Internet Explorer 10, SVG images with `.img-fluid` are disproportionately siz
In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera">
{% include icons/placeholder.svg width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" %}
</div>
{% highlight html %}
@@ -42,8 +42,8 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/docs/{{ site.doc
Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/float/) or [text alignment classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/text/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/spacing/#horizontal-centering).
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners">
<img data-src="holder.js/200x200" class="rounded float-right" alt="A generic square placeholder image with rounded corners">
{% include icons/placeholder.svg width="200" height="200" class="rounded float-left" title="A generic square placeholder image with rounded corners" %}
{% include icons/placeholder.svg width="200" height="200" class="rounded float-right" title="A generic square placeholder image with rounded corners" %}
</div>
{% highlight html %}
@@ -52,7 +52,7 @@ Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.doc
{% endhighlight %}
<div class="bd-example bd-example-images">
<img data-src="holder.js/200x200" class="rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners">
{% include icons/placeholder.svg width="200" height="200" class="rounded mx-auto d-block" title="A generic square placeholder image with rounded corners" %}
</div>
{% highlight html %}
@@ -61,7 +61,7 @@ Align images with the [helper float classes]({{ site.baseurl }}/docs/{{ site.doc
<div class="bd-example bd-example-images">
<div class="text-center">
<img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners">
{% include icons/placeholder.svg width="200" height="200" class="rounded" title="A generic square placeholder image with rounded corners" %}
</div>
</div>