ਚਿੱਤਰ
ਚਿੱਤਰਾਂ ਨੂੰ ਜਵਾਬਦੇਹ ਵਿਵਹਾਰ ਵਿੱਚ ਚੁਣਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ (ਇਸ ਲਈ ਉਹ ਕਦੇ ਵੀ ਆਪਣੇ ਮੂਲ ਤੱਤਾਂ ਨਾਲੋਂ ਵੱਡੇ ਨਾ ਬਣ ਜਾਣ) ਅਤੇ ਉਹਨਾਂ ਵਿੱਚ ਹਲਕੇ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੋ — ਇਹ ਸਭ ਕਲਾਸਾਂ ਰਾਹੀਂ।
ਜਵਾਬਦੇਹ ਚਿੱਤਰ
ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਨਾਲ ਜਵਾਬਦੇਹ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ .img-fluid
। max-width: 100%;
ਇਹ ਚਿੱਤਰ ' ਤੇ ਲਾਗੂ ਹੁੰਦਾ height: auto;
ਹੈ ਤਾਂ ਕਿ ਇਹ ਮੂਲ ਤੱਤ ਨਾਲ ਸਕੇਲ ਕਰੇ।
<img src="..." class="img-fluid" alt="...">
ਚਿੱਤਰ ਥੰਬਨੇਲ
ਸਾਡੀ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਉਪਯੋਗਤਾਵਾਂ ਤੋਂ ਇਲਾਵਾ , ਤੁਸੀਂ .img-thumbnail
ਇੱਕ ਚਿੱਤਰ ਨੂੰ ਇੱਕ ਗੋਲ 1px ਬਾਰਡਰ ਦਿੱਖ ਦੇਣ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ।
<img src="..." class="img-thumbnail" alt="...">
ਚਿੱਤਰਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰਨਾ
ਸਹਾਇਕ ਫਲੋਟ ਕਲਾਸਾਂ ਜਾਂ ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ ਕਲਾਸਾਂ ਨਾਲ ਚਿੱਤਰਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰੋ । block
-ਲੇਵਲ ਚਿੱਤਰਾਂ ਨੂੰ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ.mx-auto
ਕੇਂਦਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ।
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
ਤਸਵੀਰ
ਜੇਕਰ ਤੁਸੀਂ <picture>
ਐਲੀਮੈਂਟ ਦੀ ਵਰਤੋਂ ਕਿਸੇ ਖਾਸ ਲਈ ਮਲਟੀਪਲ <source>
ਐਲੀਮੈਂਟਸ ਨੂੰ ਨਿਸ਼ਚਿਤ ਕਰਨ ਲਈ ਕਰ ਰਹੇ <img>
ਹੋ, ਤਾਂ ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ .img-*
ਕਲਾਸਾਂ ਨੂੰ ਟੈਗ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ <img>
ਨਾ ਕਿ <picture>
ਟੈਗ ਵਿੱਚ।
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
ਸੱਸ
ਵੇਰੀਏਬਲ
ਚਿੱਤਰ ਥੰਬਨੇਲ ਲਈ ਵੇਰੀਏਬਲ ਉਪਲਬਧ ਹਨ।
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;