?? ????? ???? ???? 5 ?? ???? ??? ????. ??? ??? (? : IMG-Fluid)? ???? ?? ? ??? ????? ?????. ???? (? : W-, MX-, Rounded-*)? ???? ??? ???? ???? ??? ??????. ??? ??? ???? ???? ???? ??????. ??? ??? ???? ?? ? ??? ??? ????. ??? ?? ???? ???? ???????? ?? ?? ???? ??????.

?? ???? ???? ???? ???? ??

Bootstrap? ? ???? ???? ?????? ???? ? ????? ?? ???? ????? ?????. ??? ????? ?? ?? ? ??? ??? ? ????.

1. ??? ???? ??????

 <code class="html"><img  class="img-fluid lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="?? ????? ???? ???? ??" ></code>

• img-fluid ???? ?? ? ??? ???? ???? ?? ??? ??? ?? ??? ???? ??????.

2. ????? ??????

??? ??? ??? Bootstrap? ??? ?? ????? ?????.

• w-* : w-25 (25% ??), w-50 (50% ??)? ?? ???? ??? ??????.
• mx-* ? my-* : ???? ??? ??? ? ??? ? ?? ??? ?????? (? : mx-auto ) (???? ??).
• rounded rounded-* : ?? ?? rounded-circle ? ?? ?? ???? ???? ?????.

 <code class="html"><img  class="w-50 mx-auto rounded lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="?? ????? ???? ???? ??" ></code>

3. ??? ??? ??????

• ??? ??? ???? ???? ??? ?? ?? ??? ?? ? ? ????.

   <code class="html"><div class="media"> <img  class="mr-3 lazy" src="/static/imghw/default1.png" data-src="image.jpg" alt="?? ????? ???? ???? ??" > <div class="media-body"> <p>圖像描述...</p> </div> </div></code>

4. ??? ??? ??????

• ??? ??? ???? ?? ? ??? ??? ?? ? ????.

   <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="?? ????? ???? ???? ??" > </div> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="?? ????? ???? ???? ??" > </div> <div class="col-sm-6 col-md-4"> <img  src="/static/imghw/default1.png" data-src="image3.jpg" class="lazy" alt="?? ????? ???? ???? ??" > </div> </div></code>

5. ??? ?? ?? ?

• ??? ?? ???? ???????? ?? ?? ???? ???? ? ?????.

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

??? ??? ???? ?? ???? ???? ???? ?? ???? ?????? ???? ??? ?? ? ???? ?? ? ????.

? ??? ?? ????? ???? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!