გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

სურათები

დოკუმენტაცია და მაგალითები გამოსახულების საპასუხო ქცევის არჩევისთვის (ასე რომ ისინი არასოდეს გახდნენ უფრო ფართო ვიდრე მათი მშობელი) და დაამატეთ მათ მსუბუქი სტილის - ყველაფერი კლასების საშუალებით.

საპასუხო სურათები

Bootstrap-ში სურათები მზადდება საპასუხოდ .img-fluid. ეს ეხება max-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="...">

სურათების გასწორება

სურათების გასწორება დამხმარე float კლასებთან ან ტექსტის გასწორების კლასებთან . block- დონის სურათები შეიძლება იყოს ცენტრირებული margin utility კლასის გამოყენებით.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;