Saltar al contenido principal Salta a docs navegación
in English

Imaykuna

Documentación chaymanta ejemplokuna siq'ikuna kutichiq ruwayman akllanapaq (chayrayku mana hayk'aqpas tayta elementonkumanta aswan hatunchu kanku) chaymanta paykunaman llamp'u estilokuna yapanku —llapa clasekuna kaqnintakama.

Imagenes respuestas

Bootstrap kaqpi siq'ikunaqa kutichiq ruwasqa kanku .img-fluid. Kayqa ruwakun max-width: 100%;chaymanta height: auto;siq'iman chaymanta tayta elementowan escalananpaq.

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

Imahina uchuy qillqakuna

Borde-radius yanapakuyniykumanta yapasqa , .img-thumbnailhuk siq'iman huk muyu 1px frontera rikch'ayta qunaykipaq llamk'achiy atikunki .

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="...">

Imahinakunata chiqanchay

Yanapakuq float clasekunawan icha qillqa chiqanchay clasekunawan siq'ikunata chiqanchay . block-nivel nisqa siq'ikunaqa margen utilidad clase nisqawan chawpichasqa.mx-auto kanman .

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>

Rikchay

Sichus <picture>elementota llamk'achkanki achka <source>elementokunata huk específico kaqpaq willanaykipaq , allinta qhaway clasekunata <img>yapayta chaymanta mana etiquetaman..img-*<img><picture>

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Sass

Variables nisqakuna

Hukllachasqakuna siq'i uchuy rikch'aqkunapaqmi kachkan.

$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;