ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
in English

ਚਿੱਤਰ

ਚਿੱਤਰਾਂ ਨੂੰ ਜਵਾਬਦੇਹ ਵਿਵਹਾਰ ਵਿੱਚ ਚੁਣਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ (ਇਸ ਲਈ ਉਹ ਕਦੇ ਵੀ ਆਪਣੇ ਮੂਲ ਤੱਤਾਂ ਨਾਲੋਂ ਵੱਡੇ ਨਾ ਬਣ ਜਾਣ) ਅਤੇ ਉਹਨਾਂ ਵਿੱਚ ਹਲਕੇ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੋ — ਇਹ ਸਭ ਕਲਾਸਾਂ ਰਾਹੀਂ।

ਜਵਾਬਦੇਹ ਚਿੱਤਰ

ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਨਾਲ ਜਵਾਬਦੇਹ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ .img-fluidmax-width: 100%;ਇਹ ਚਿੱਤਰ ' ਤੇ ਲਾਗੂ ਹੁੰਦਾ height: auto;ਹੈ ਤਾਂ ਕਿ ਇਹ ਮੂਲ ਤੱਤ ਨਾਲ ਸਕੇਲ ਕਰੇ।

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">

ਚਿੱਤਰ ਥੰਬਨੇਲ

ਸਾਡੀ ਬਾਰਡਰ-ਰੇਡੀਅਸ ਉਪਯੋਗਤਾਵਾਂ ਤੋਂ ਇਲਾਵਾ , ਤੁਸੀਂ .img-thumbnailਇੱਕ ਚਿੱਤਰ ਨੂੰ ਇੱਕ ਗੋਲ 1px ਬਾਰਡਰ ਦਿੱਖ ਦੇਣ ਲਈ ਵਰਤ ਸਕਦੇ ਹੋ।

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

ਚਿੱਤਰਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰਨਾ

ਸਹਾਇਕ ਫਲੋਟ ਕਲਾਸਾਂ ਜਾਂ ਟੈਕਸਟ ਅਲਾਈਨਮੈਂਟ ਕਲਾਸਾਂ ਨਾਲ ਚਿੱਤਰਾਂ ਨੂੰ ਇਕਸਾਰ ਕਰੋ । block-ਲੇਵਲ ਚਿੱਤਰਾਂ ਨੂੰ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾ ਕਲਾਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ.mx-auto ਕੇਂਦਰਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ ।

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<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;