ブートストラップに画像を導入する方法

ブートストラップを使用して画像を導入する一般的な方法は 2 つあります: 要素を使用して src 属性を指定する方法と、img-fluid クラスを使用して画像をコンテナの幅に適合させる方法です。

Bootstrap を使用して画像を導入する方法

Bootstrap には、画像を導入するためのさまざまな方法が用意されています。最も一般的な 2 つの方法: 一般的に使用される方法:

Use img element

これは最も直接的な方法です。単に 要素を追加し、画像のパスを指す src 属性を指定します。例:

<code><img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="图片说明"></code>

img-fluid クラスを使用します

Bootstrap は img-fluid クラスを提供します。コンテナの幅に合わせて画像を自動作成します。このメソッドを使用するには、img-fluid クラスを <img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="ブートストラップに画像を導入する方法" > 要素に追加します。例:

<code><img class="img-fluid lazy" src="/static/imghwm/default1.png" data-src="image.jpg" alt="图片说明"></code>

その他のオプション

上記の 2 つの方法に加えて、Bootstrap は画像の外観を制御するための他のオプションも提供します:

• img-thumbnail クラス: 境界線と丸い角を持つサムネイルを作成します。
• img-rounded クラス: 角が丸い画像を作成します。
• img-circle クラス: 円形の画像を作成します。
• 図 要素: 画像にタイトルと説明を追加します。

ヒント

• 画像のパスが正しいことを確認してください。正しくないと、画像が表示されません。
• レスポンシブ デザインの場合、さまざまなデバイスで画像が正しく表示されるように、img-fluid クラスを使用することをお勧めします。
• 画像が表示できない場合に使用する画像の代替テキストを提供するには、alt 属性を使用します。

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