How to set up images on bootstrap

Bootstrap has five common ways to use images: using image classes (such as img-fluid) to achieve responsive image scaling. Use utilities (such as w-, mx-, rounded-*) to flexibly customize image styles. Use media objects to align between images and text. Use image groups to create a responsive thumbnail set. Use image placeholders to display substitute content before the image is loaded.

How to set up images using Bootstrap

Bootstrap provides many classes and utilities to help you style and place images in web pages. To set up a picture, you can use one of the following methods:

1. Use image classes

 <code class="html"><img  class="img-fluid lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="How to set up images on bootstrap" ></code>

• img-fluid class applies responsive image styles to automatically resize and fluid at all viewport sizes.

2. Use the utility

In addition to image classes, Bootstrap also provides the following utilities:

• w-* : Set the width of the image, for example: w-25 (25% width), w-50 (50% width).
• mx-* and my-* : Set the left and right and upper and lower margins of the image, for example: mx-auto (centered horizontally).
• rounded and rounded-* : Add rounded corners to the image, for example: rounded-circle .

 <code class="html"><img  class="w-50 mx-auto rounded lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="How to set up images on bootstrap" ></code>

3. Use media objects

• Media objects allow you to align images with text or other elements.

   <code class="html"><div class="media"> <img  class="mr-3 lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="How to set up images on bootstrap" > <div class="media-body"> <p>图像描述...</p> </div> </div></code>

4. Use image groups

• Image groups allow you to create a responsive set of thumbnails.

   <code class="html"><div class="row"> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png" data-src="image1.jpg" class="lazy" alt="How to set up images on bootstrap" > </div> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="How to set up images on bootstrap" > </div> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png" data-src="image3.jpg" class="lazy" alt="How to set up images on bootstrap" > </div> </div></code>

5. Image placeholder

• Image placeholders are used to display alternative content before the image is loaded.

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

By using these methods, you can easily set up and style images with Bootstrap to create beautiful and responsive web pages.

The above is the detailed content of How to set up images on bootstrap. For more information, please follow other related articles on the PHP Chinese website!