Суреттер

Суреттерді жауап беретін мінез-құлыққа қосуға арналған құжаттар мен мысалдар (сондықтан олар ешқашан ата-аналық элементтерден үлкен болмайды) және оларға жеңіл стильдерді қосады - барлығы сыныптар арқылы.

Жауапты суреттер

Bootstrap қолданбасындағы кескіндер көмегімен жауап береді .img-fluid. max-width: 100%;және height: auto;кескінге ол негізгі элементпен масштабталатындай қолданылады.

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

SVG кескіндері және Internet Explorer

Internet Explorer 10 және 11 нұсқаларында SVG кескіндері .img-fluidпропорционалды емес өлшемге ие. Мұны түзету үшін қосыңыз width: 100%;немесе .w-100қажет болса. Бұл түзету басқа кескін пішімдерін дұрыс емес өлшемдеді, сондықтан Bootstrap оны автоматты түрде қолданбайды.

Кескін нобайлары

Шекара радиусы утилиталарына қоса , .img-thumbnailкескінге дөңгелектенген 1px жиек көрінісін беру үшін пайдалана аласыз .

<img src="..." alt="..." class="img-thumbnail">

Суреттерді туралау

Суреттерді көмекші қалқымалы сыныптармен немесе мәтінді туралау сыныптарымен туралаңыз . block-деңгейдегі кескіндерді маржа утилитасын пайдаланып ортаға қоюға .mx-autoболады .

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