ਚਿੱਤਰ
ਚਿੱਤਰਾਂ ਨੂੰ ਜਵਾਬਦੇਹ ਵਿਵਹਾਰ ਵਿੱਚ ਚੁਣਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ (ਇਸ ਲਈ ਉਹ ਕਦੇ ਵੀ ਆਪਣੇ ਮਾਤਾ-ਪਿਤਾ ਨਾਲੋਂ ਚੌੜੀਆਂ ਨਾ ਹੋਣ) ਅਤੇ ਉਹਨਾਂ ਵਿੱਚ ਹਲਕੇ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੋ - ਇਹ ਸਭ ਕਲਾਸਾਂ ਰਾਹੀਂ।
ਜਵਾਬਦੇਹ ਚਿੱਤਰ
ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਚਿੱਤਰਾਂ ਨੂੰ ਨਾਲ ਜਵਾਬਦੇਹ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ .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;