bootstrap-content

Bootstrap 5.3 コンテンツ

Bootstrap は、Reboot をベースに、タイポグラフィ、画像、テーブルなどのコンテンツスタイルを提供します。

Reboot

Bootstrap Reboot は、ブラウザーのデフォルトスタイルを正規化し、ブラウザー間で一貫したレンダリングを実現します。後に続くタイポグラフィとコンテンツスタイルの基盤となります。

コード要素

<p>Use <code>&lt;section&gt;</code> for page sections.</p>


<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line.&lt;/p&gt;</code></pre>


<var>y</var> = <var>m</var><var>x</var> + <var>b</var>


<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Or type <kbd>cd</kbd> to change directory.</p>


<kbd><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></kbd>


<samp>This text is meant to be sample output from a program.</samp>

アドレス

<address>
  <strong>Company Name</strong><br>
  123 Main Street<br>
  City, State 12345<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:[email protected]">[email protected]</a>
</address>

水平線

<hr>


<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">


<hr class="my-5">

略語

<p><abbr title="Hypertext Markup Language">HTML</abbr> is the foundation of the web.</p>


<p><abbr title="Cascading Style Sheets" class="initialism">CSS</abbr> for styling.</p>

CSS 変数、ページのデフォルト設定、ネイティブフォントスタック、Sass のカスタマイズオプションについては、references/reboot-reference.md を参照してください。

タイポグラフィ

見出し

Bootstrap のスタイルを適用した標準の HTML 見出しです。

<h1>h1. Bootstrap heading</h1>  
<h2>h2. Bootstrap heading</h2>  
<h3>h3. Bootstrap heading</h3>  
<h4>h4. Bootstrap heading</h4>  
<h5>h5. Bootstrap heading</h5>  
<h6>h6. Bootstrap heading</h6>  


<p class="h1">h1 styled paragraph</p>
<p class="h3">h3 styled paragraph</p>

ディスプレイ見出し

より大きく、個性を強調した見出しです。

<h1 class="display-1">Display 1</h1>  
<h1 class="display-2">Display 2</h1>  
<h1 class="display-3">Display 3</h1>  
<h1 class="display-4">Display 4</h1>  
<h1 class="display-5">Display 5</h1>  
<h1 class="display-6">Display 6</h1>  

リードテキスト

段落を目立たせます。

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

インラインテキスト要素

<mark>Highlighted text</mark>
<del>Deleted text</del>
<s>Strikethrough (no longer accurate)</s>
<ins>Inserted text</ins>
<u>Underlined text</u>
<small>Fine print</small>
<strong>Bold text</strong>
<em>Italicized text</em>

テキストユーティリティ

<p class="fs-1">fs-1 text (2.5rem)</p>
<p class="fs-2">fs-2 text (2rem)</p>
<p class="fs-3">fs-3 text (1.75rem)</p>
<p class="fs-4">fs-4 text (1.5rem)</p>
<p class="fs-5">fs-5 text (1.25rem)</p>
<p class="fs-6">fs-6 text (1rem)</p>


<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder text</p>
<p class="fw-semibold">Semibold text</p>
<p class="fw-medium">Medium text</p>
<p class="fw-normal">Normal text</p>
<p class="fw-light">Light text</p>
<p class="fw-lighter">Lighter text</p>


<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal style text</p>


<p class="lh-1">Line height 1</p>
<p class="lh-sm">Small line height (1.25)</p>
<p class="lh-base">Base line height (1.5)</p>
<p class="lh-lg">Large line height (2)</p>


<p class="text-decoration-underline">Underlined</p>
<p class="text-decoration-line-through">Line through</p>
<p class="text-decoration-none">No decoration</p>

テキストの配置

<p class="text-start">Left aligned (LTR)</p>
<p class="text-center">Center aligned</p>
<p class="text-end">Right aligned (LTR)</p>


<p class="text-sm-start text-md-center text-lg-end">
  Responsive alignment
</p>

テキストの折り返しとオーバーフロー

<p class="text-wrap">Wrapping text</p>
<p class="text-nowrap">No wrap text</p>
<p class="text-truncate" style="max-width: 200px;">
  Truncated text with ellipsis...
</p>
<p class="text-break">Break long words</p>

引用ブロック

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

リスト

<ul class="list-unstyled">
  <li>No bullets</li>
  <li>On this list</li>
</ul>


<ul class="list-inline">
  <li class="list-inline-item">First</li>
  <li class="list-inline-item">Second</li>
  <li class="list-inline-item">Third</li>
</ul>

テキストの変換

<p class="text-lowercase">LOWERCASED TEXT</p>
<p class="text-uppercase">uppercased text</p>
<p class="text-capitalize">capitalized text</p>

等幅フォント

<p class="font-monospace">This is in monospace</p>

色のリセット

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

見出しのカスタマイズ

見出しに、薄い色の補足テキストを追加します。

<h3>
  Fancy display heading
  <small class="text-body-secondary">With faded secondary text</small>
</h3>

<h1 class="display-4">
  Display heading
  <small class="text-body-secondary">Secondary text</small>
</h1>

レスポンシブフォントサイズ

Bootstrap 5 では、RFS（レスポンシブフォントサイズ）がデフォルトで有効になっており、ビューポートの寸法に応じて font-size が自動的に調整されます。RFS の詳細と Sass のカスタマイズオプションについては、references/typography-reference.md を参照してください。

画像

レスポンシブ画像

<img src="..." class="img-fluid" alt="Responsive image">

画像サムネイル

<img src="..." class="img-thumbnail" alt="Thumbnail">

画像の配置

<img src="..." class="float-start" alt="Left aligned">
<img src="..." class="float-end" alt="Right aligned">


<img src="..." class="d-block mx-auto" alt="Centered">

Picture 要素

<picture>
  <source srcset="large.jpg" media="(min-width: 992px)">
  <source srcset="medium.jpg" media="(min-width: 768px)">
  <img src="small.jpg" class="img-fluid" alt="Responsive">
</picture>

テーブル

基本的なテーブル

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

テーブルのバリエーション

<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

テーブルのスタイル

<table class="table table-striped">...</table>


<table class="table table-striped-columns">...</table>


<table class="table table-hover">...</table>


<tr class="table-active">...</tr>


<table class="table table-bordered">...</table>


<table class="table table-borderless">...</table>


<table class="table table-sm">...</table>


<table class="table table-striped table-hover table-bordered">...</table>

テーブルヘッダーのバリエーション

<table class="table">
  <thead class="table-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>...</tbody>
</table>


<table class="table">
  <thead class="table-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>...</tbody>
</table>

テーブルグループの区切り線

テーブルのセクション間に、より太い境界線を追加します。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody class="table-group-divider">
    <tr>
      <th scope="row">1</th>
      <td>John</td>
    </tr>
  </tbody>
</table>

テーブルのキャプション

<table class="table">
  <caption>List of users</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>


<table class="table caption-top">
  <caption>List of users</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

テーブルフッター

<table class="table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>$10.00</td>
    </tr>
  </tbody>
  <tfoot class="table-group-divider">
    <tr>
      <th>Total</th>
      <td>$10.00</td>
    </tr>
  </tfoot>
</table>

レスポンシブテーブル

<div class="table-responsive">
  <table class="table">...</table>
</div>


<div class="table-responsive-md">
  <table class="table">...</table>
</div>

垂直方向の配置

<table class="table align-middle">
  <tr class="align-bottom">
    <td class="align-top">...</td>
  </tr>
</table>

図

<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the image.</figcaption>
</figure>


<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">Right-aligned caption.</figcaption>
</figure>

その他のリソース

リファレンスファイル

• references/reboot-reference.md - CSS 変数、ページのデフォルト設定、ネイティブフォントスタック、Sass のカスタマイズ
• references/typography-reference.md - テキストユーティリティの全一覧、RFS の詳細、Sass のカスタマイズ
• references/images-reference.md - 画像クラスの全一覧と Sass のカスタマイズ
• references/tables-reference.md - テーブルクラスの全一覧
• references/figures-reference.md - 図クラスの全一覧

サンプルファイル

• examples/reboot-elements.html - code、kbd、var、samp、abbr、hr 要素
• examples/typography-patterns.html - タイポグラフィ、見出し、テキストユーティリティ
• examples/images-patterns.html - レスポンシブ画像と配置
• examples/tables.html - テーブルのスタイルとバリエーション
• examples/figures-patterns.html - 図とキャプションのパターン