Bootstrap 5 Görsel

İhtiyari Dersler

Kurs Önerileri：

Görsel Şekli Yuvarlak Köşeler

Örnek

.rounded

Kendi Kendine Deney

sınıfı, görseli yuvarlak köşelere ekler:

<img src="flower.jpg" class="rounded" alt="Flower"> Yuvarlak

Örnek

.rounded-circle

Kendi Kendine Deney

sınıfı, görseli yuvarlak haline getirir:

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre"> Minyatür

Örnek

.img-thumbnail

Kendi Kendine Deney

sınıfı, görseli kenarlıklı minyatür haline getirir:

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre"> görseli hizalayın .float-start sınıfı, görseli sol tarafa yükle veya .float-end

Örnek

Sağa Yüklü:
<img src="tulip.jpg" class="float-start">

Kendi Kendine Deney

<img src="tulip.jpg" class="float-end">

Merkezi Görsel Görseli merkeze yerleştirmek için, görselimize utility sınıfını ekledik. .mx-auto (margin:auto) ve .d-block

Örnek

(display:block)：

Kendi Kendine Deney

<img src="tulip.jpg" class="mx-auto d-block">

Yanıt verici Görseller

Görseller çeşitli boyutlarda olacaktır. Ekran da budur. Yanıt verici görseller, otomatik olarak ekran boyutuna uyum sağlar. .img-fluid sınıf ekleyin <img> etiketlerini kullanarak yanıt verici görseller oluşturun. Sonra görsel, ebeveyn öğeye iyi bir şekilde ölçeklenecektir.

.img-fluid Görsel应用类 max-width: 100%; ve height: auto; ：

Örnek

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

Kendi Kendine Deney