Bootstrap4-typography

提供：Dev Guides
移動先:案内、検索

ブートストラップ4-タイポグラフィ

説明

タイポグラフィ機能は、見出し、段落、リスト、その他のインライン要素を作成します。 Webページでのテキスト要素のレンダリング方法を指定します。

次のセクションで、タイポグラフィの各機能を見てみましょう。

見出し

ブートストラップ4は、以下の例に示すようにh1からh6までのHTML見出しを提供します-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h1>h1 - finddevguides</h1>
         <h2>h2 - finddevguides</h2>
         <h3>h3 - finddevguides</h3>
         <h4>h4 - finddevguides</h4>
         <h5>h5 - finddevguides</h5>
         <h6>h6 - finddevguides</h6>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

見出しを表示

表示見出しは、。display-1 _、。display-2 、。display-3 、_などの4つのクラスの表示見出しを使用して、通常の見出しよりも大きいフォントサイズとフォント重量でテキストを表示するために使用されます。ディスプレイ-4。

次の例は、上記の表示見出しクラスの使用方法を示しています-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h1 class = "display-1">finddevguides</h1>
         <h1 class = "display-2">finddevguides</h1>
         <h1 class = "display-3">finddevguides</h1>
         <h1 class = "display-4">finddevguides</h1>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

リード、略語、ブロック引用符、マーク付きテキスト

  • _.lead_クラスを使用して、段落を強調します。
  • HTML <abbr>要素は、WWWやHTTPなどの略語または頭字語のマークアップを提供します。 _title_属性を使用し、下部に沿って明るい点線の境界線で表示し、ホバー時に全文を表示します。
  • <blockquote>要素で_.blockquote_クラスを使用して、ドキュメント内のコンテンツのブロックを引用できます。
  • <mark>要素を使用して、テキストをマークまたは強調表示された状態にします。

次の例は、上記の各タイプを示しています-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h2>Lead</h2>
         <p class = "lead">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.
         </p>

         <h2>Abbreviations</h2>
         <p><abbr title = "World Wide Web">WWW</abbr></p>
         <h2>Blockquote</h2>
         <blockquote class = "blockquote">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
            commodo consequat.
         </blockquote>

         <h2>Marked Text</h2>
         <p>Welcome to <mark>finddevguides</mark></p>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

リスト

Bootstrap 4は、スタイルなし、インライン、説明リストの位置合わせリストなど、さまざまなスタイルを提供します。

  • スタイルなし-デフォルトの_list-style_および左マージンを削除することにより、リストを表示できます。
  • インライン-.list-inline_および.list-inline-item_クラスを使用して、すべてのリストアイテムを1行に配置することもできます。
  • 説明リストの配置-<dl>タグに_.row_クラスを使用して、用語と説明を水平に表示できます。

次の例は、上記のリストタイプの使用方法を示しています-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <div class = "container">
         <h2>Unstyled List</h2>
         <ul class = "list-unstyled">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
         </ul>

         <h2>Inline List</h2>
         <ul class = "list-inline">
            <li class = "list-inline-item">HTML</li>
            <li class = "list-inline-item">CSS</li>
            <li class = "list-inline-item">JavaScript</li>
         </ul>

         <h2>Description list alignment</h2>
         <dl class = "row">
            <dt class = "col-sm-3">HTML</dt>
            <dd class = "col-sm-9">To define the content of web pages</dd>
            <dt class = "col-sm-3">CSS</dt>
            <dd class = "col-sm-9">To specify the layout of web pages</dd>
            <dt class = "col-sm-3">JavaScript</dt>
            <dd class = "col-sm-9">To program the behavior of web pages</dd>
         </dl>
      </div>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

「https://www.finddevguides.com/index.php?title=Bootstrap4-typography&oldid=7399」から取得
Powered by MediaWiki