Bootstrapのブロック引用の使い方


ブロック引用は、引用文や注目すべきテキストを強調するために使用される要素です。以下に、シンプルで簡単な方法とコード例をいくつか紹介します。

まず最初に、ブートストラップのCSSクラスを使用してブロック引用を作成する方法を見てみましょう。以下のコードは、引用文を含むブロック引用を作成する例です。

<blockquote class="blockquote">
  <p class="mb-0">引用文や重要なテキストをここに入力します。</p>
</blockquote>

上記のコードでは、blockquoteクラスを使用してブロック引用の要素を作成しています。引用文はp要素内に入力し、任意のテキストを表示することができます。また、mb-0クラスを使用して余白を調整しています。

次に、ブロック引用内で作者や引用元を表示する方法を見てみましょう。以下のコードは、引用文と引用元を含むブロック引用を作成する例です。

<blockquote class="blockquote">
  <p class="mb-0">引用文や重要なテキストをここに入力します。</p>
  <footer class="blockquote-footer">引用元の情報や作者名をここに入力します。</footer>
</blockquote>

上記のコードでは、blockquote-footerクラスを使用して引用元の情報や作者名を表示しています。ブロック引用内にfooter要素を追加し、その中に情報を入力します。

以上が、ブートストラップでブロック引用を作成する方法の基本的な例です。他にもさまざまなカスタマイズやスタイリングの方法がありますので、詳細についてはブートストラップの公式ドキュメントを参照してください。

この投稿では、ブートストラップのブロック引用の使い方について説明しました。シンプルで簡単な方法といくつかのコード例を提供しましたので、ぜひ参考にしてください。