So richten Sie Bilder auf Bootstrap ein

Bootstrap verfügt über fünf gängige Möglichkeiten, Bilder zu verwenden: Verwenden von Bildklassen (z. B. IMG-Fluid), um eine reaktionsschnelle Bildskalierung zu erreichen. Verwenden Sie Dienstprogramme (wie W-, MX-, Runded-*), um Bildstile flexibel anzupassen. Verwenden Sie Medienobjekte, um zwischen Bildern und Text auszurichten. Verwenden Sie Bildgruppen, um ein reaktionsschnelles Miniaturansatz zu erstellen. Verwenden Sie Image -Platzhalter, um Ersatzinhalte anzuzeigen, bevor das Bild geladen wird.

So richten Sie Bilder mit Bootstrap ein

Bootstrap bietet viele Klassen und Dienstprogramme, mit denen Sie Bilder in Webseiten stylen und platzieren können. Um ein Bild einzurichten, können Sie eine der folgenden Methoden verwenden:

1. Verwenden Sie Bildklassen

 <code class="html"><img  class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="So richten Sie Bilder auf Bootstrap ein" ></code>

• img-fluid -Klasse wendet reaktionsschnelle Bildstile an, um die Größe und Flüssigkeit bei allen Ansichtsfenster automatisch zu ändern.

2. Verwenden Sie den Dienstprogramm

Neben den Bildklassen bietet Bootstrap auch die folgenden Dienstprogramme:

• w-* : Setzen Sie die Breite des Bildes, zum Beispiel: w-25 (25% Breite), w-50 (50% Breite).
• mx-* und my-* : Links und rechts und obere und untere Ränder des Bildes einstellen, zum Beispiel: mx-auto (horizontal zentriert).
• rounded und rounded-* : Fügen Sie dem Bild abgerundete Ecken hinzu, zum Beispiel: rounded-circle .

 <code class="html"><img  class="w-50 mx-auto rounded lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="So richten Sie Bilder auf Bootstrap ein" ></code>

3. Verwenden Sie Medienobjekte

• Mit Medienobjekten können Sie Bilder mit Text oder anderen Elementen ausrichten.

   <code class="html"><div class="media"> <img  class="mr-3 lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="So richten Sie Bilder auf Bootstrap ein" > <div class="media-body"> <p>图像描述...</p> </div> </div></code>

4. Verwenden Sie Bildgruppen

• Mit Bildgruppen können Sie einen ansprechenden Satz von Miniaturansichten erstellen.

   <code class="html"><div class="row"> <div class="col-sm-6 col-md-4"> <img  src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="So richten Sie Bilder auf Bootstrap ein" > </div> <div class="col-sm-6 col-md-4"> <img  src="/static/imghwm/default1.png" data-src="image2.jpg" class="lazy" alt="So richten Sie Bilder auf Bootstrap ein" > </div> <div class="col-sm-6 col-md-4"> <img  src="/static/imghwm/default1.png" data-src="image3.jpg" class="lazy" alt="So richten Sie Bilder auf Bootstrap ein" > </div> </div></code>

5. Image -Platzhalter

• Image -Platzhalter werden verwendet, um alternative Inhalte anzuzeigen, bevor das Bild geladen wird.

   <code class="html"><img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="Responsive image"> <div class="placeholder-glow"> <span class="placeholder col-12"></span> </div></code>

Durch die Verwendung dieser Methoden können Sie Bilder mit Bootstrap problemlos einrichten und stylen, um schöne und reaktionsschnelle Webseiten zu erstellen.

Das obige ist der detaillierte Inhalt vonSo richten Sie Bilder auf Bootstrap ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!