ブートストラップで画像をセットアップする方法

Bootstrapには、画像クラス（IMG-Fluidなど）を使用してレスポンシブ画像スケーリングを実現するという5つの一般的な方法があります。ユーティリティ（w-、mx-、丸みを帯びた*など）を使用して、画像スタイルを柔軟にカスタマイズします。メディアオブジェクトを使用して、画像とテキストを揃えます。画像グループを使用して、レスポンシブサムネイルセットを作成します。画像のプレースホルダーを使用して、画像がロードされる前に代替コンテンツを表示します。

ブートストラップを使用して画像をセットアップする方法

Bootstrapは、多くのクラスとユーティリティを提供して、画像をWebページにスタイリングして配置するのに役立ちます。写真を設定するには、次の方法のいずれかを使用できます。

1.画像クラスを使用します

<img  class="img-fluid lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="ブートストラップで画像をセットアップする方法" >

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

  これらの方法を使用することで、Bootstrapを使用して画像を簡単に設定してスタイルを設定して、美しくレスポンシブなWebページを作成できます。

  以上がブートストラップで画像をセットアップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。