Source

სურათები

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

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

Bootstrap-ში სურათები მზადდება საპასუხოდ .img-fluid. max-width: 100%;და height: auto;გამოიყენება სურათზე ისე, რომ იგი მასშტაბირებს მშობელ ელემენტთან ერთად.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG სურათები და IE 10

Internet Explorer 10-ში SVG სურათები .img-fluidარაპროპორციული ზომისაა. ამის გამოსასწორებლად, დაამატეთ width: 100% \9;სადაც საჭიროა. ეს შესწორება არასწორად ზომავს სხვა გამოსახულების ფორმატებს, ამიტომ Bootstrap არ იყენებს მას ავტომატურად.

სურათის ესკიზები

გარდა ჩვენი საზღვრის რადიუსის უტილიტაებისა , შეგიძლიათ გამოიყენოთ .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="..." alt="..." class="img-thumbnail">

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

სურათების გასწორება დამხმარე float კლასებთან ან ტექსტის გასწორების კლასებთან . block- დონის სურათები შეიძლება იყოს ცენტრირებული margin utility კლასის გამოყენებით.mx-auto .

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" 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>