ホームページ >ウェブフロントエンド >ブートストラップのチュートリアル >Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう

Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう

青灯夜游転載: 2021-11-19 19:32:332328ブラウズ

この記事では、Bootstrapの画像コンポーネントとアウトラインコンポーネントについて学び、レスポンシブ画像、画像サムネイル、画像タグ、アウトライン(図)について紹介します。 . !

1 画像

このセクションでは、画像が応答動作をサポートするようにする方法 (親要素の範囲を超えないように) とその方法を学習します。クラス (class) を使用するにはスタイルを追加します。

1.1 レスポンシブ画像

Bootstrap が提供する .img-fluid クラスを通じて、画像がレスポンシブレイアウトをサポートするようにします。原則として、画像に max-width: 100%; and height: auto; を指定して、親要素に合わせて拡大縮小するようにします。 [関連する推奨事項: "bootstrap チュートリアル "]

nbsp;html>

  
    <meta>
    <meta>
    <meta>
    <meta>
    <link>
    <title>图片演示</title>
  
  
        <div>

            <img  alt="Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう" >

        </div>
   
     <script></script>

上記のコンテナーは、画像を中央に配置し、四方に余白を付けて切り取るものです。これは画像コンポーネントの一部ではありません。次のとおりです。デモビデオです。

Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう

10.1.2 画像サムネイル

一般クラスによって提供されるボーダー半径に加えて、.img-thumbnail を使用して、画像のサムネール幅 1px の円形の境界線が表示されます。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <style>
      .div1{width: 300;  height: 300px;text-align: center;padding-top: 50px;}
    </style>
    <title>图片演示</title>
  </head>
  <body>
            <div class="div1">
                 <img src="pic/taohua.jpg"  width="50%" class="img-thumbnail" alt="点击查看大图">
            </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

このコンポーネントも応答性がありますが、スクリーンショットのみを提供しました。上記の CSS スタイルは、画像が端に近づかないようにするためのもので、境界線が表示されません。実際には、コンテナを直接使用する場合も同様です。これは、コンテナもコンテナの一部であると誰もが思わないように、コンテナを使用しないためです。

Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう

1.3 pict タグ

picture 要素は、1 つ以上のsource 要素と img 要素をメディアと組み合わせて使用します (メディアクエリ)。画面に合わせたサイズに応じて異なる画像が表示されます。一致しない場合、またはブラウザがpicture属性をサポートしていない場合は、img要素が使用されます。picture要素にはソースがいくつ指定されても、1つのみです。そのうちの、または画像が表示されます。

この要素を使用して <img alt="Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう" > に複数の <source></source> 要素を指定する場合は、必ず .img-* クラスを # # に追加してください。 <picture></picture> 要素またはソース要素の代わりに #<img alt="Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう" > 要素を使用します。

ソース要素は順番に配置されています。メディアクエリ値は、max-width の場合は小さいものから大きいものの順に並べ替えられ、min-width の場合は大きいものから小さいものの順に並べ替えられます。以下はソースコードですが、ソースコード中のjsコードは比較として画面幅を取得するものです。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>图片演示</title>
  </head>
  <body>
        <div class="container">
            <p>
                <span id="info"></span>
                <script>
                getwidth();
                window.onresize = function(){
                    getwidth();
                }
                function getwidth(){
                document.getElementById("info").innerHTML="宽度："+document.documentElement.clientWidth+"，高度："+document.documentElement.clientHeight;
                }
                </script>
                    </p>
            <picture>
                <source media="(max-width: 600px)" srcset="pic/girl1.jpg">
                <source media="(max-width: 700px)" srcset="pic/girl2.jpg">
                <img  src="pic/taohua.jpg" class="img-thumbnail" alt="Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう" >
            </picture>

            <picture>
                <source media="(min-width: 700px)" srcset="pic/girl1.jpg">
                <source media="(min-width: 600px)" srcset="pic/girl2.jpg">
                <img  src="pic/taohua.jpg" class="img-thumbnail" alt="Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう" >
            </picture>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

以下はデモです

Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう

2 図

Bootstrap 図コンポーネントとテキストを通じて関連画像を表示します。コンテンツの一部 (オプションのキャプション付きの画像など) を表示する必要がある場合は、常に

タグを使用します。

組み込みの .figure、.figure-img、および .figure-caption カテゴリを使用して、基本的な HTML5 を提供します

および

タグ スタイル設定。画像には明確なサイズがありません。レスポンシブ画像として設定するには、

<img alt="Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう" > タグに .img-fluid カテゴリを必ず追加してください。

実はアウトラインコンポーネントは絵だけに使われているわけではなく、前節のテキストレイアウト部分や出典引用部分でもアウトラインコンポーネントが使われています。

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>figure演示</title>
  </head>
  <body>
        <div class="container">

            <figure class="figure">
                <img src="pic/taohua.jpg" class="figure-img img-fluid rounded" alt="...">
                <figcaption class="figure-caption text-center">桃花朵朵开</figcaption>
                </figure>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Bootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょう

imgタグ内のroundedクラスを簡単に説明すると、画像の角を丸くするという意味です。それが必要。 figcaption タグの text-center クラスは画像を中央に配置するために使用されます。text-end を使用して画像を右に配置することもできます。デフォルトでは左揃えである必要はありません。

今日のレッスンはここまでです。

Please follow me, and learn the tables in Bootstrap in the Section 11 in my Original "Bootstrap5 from Zero Basics to Mastery" by Liu Liu. テーブルは幅広い用途があり、設計するのは非常に面倒です。幸いなことに、ブートストラップの助けを借りて、美しいテーブルを簡単に作成できます。

この記事がお役に立ちましたら、ぜひ「いいね!」をお願いいたします。

ブートストラップの詳細については、

ブートストラップの基本チュートリアルをご覧ください。！

以上がBootstrapの画像コンポーネントとアウトラインコンポーネントについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はjuejin.cnで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Bootstrap グリッドレイアウトで列をソートおよびオフセットする方法についての簡単な説明次の記事：Bootstrap グリッドレイアウトで列をソートおよびオフセットする方法についての簡単な説明

続きを見る