Approach
Normalize.css に基づき, デフォルトのスタイルを利用しながら, 要素セレクタを用いてあらゆる要素のスタイルを正常化しています。
スタイルが必要なときはクラスに追加します。
例えば <table> 要素はシンプルな作りになっていて, スタイルを適用したいときは .table , .table-bordered などが用意されています。
Headings
すべての見出し要素-<h1>-<h6>は、margin-topが削除され、margin-bottom: .5remが設定され、line-heightが強調されます。見出しはデフォルトで colorを継承しますが、オプションのCSS変数 --bs-heading-colorによって上書きすることができます。
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<template>
<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>
</template>
<template>
<b-h level="1">
h1. Bootstrap heading
</b-h>
<b-h level="2">
h2. Bootstrap heading
</b-h>
<b-h level="3">
h3. Bootstrap heading
</b-h>
<b-h level="4">
h4. Bootstrap heading
</b-h>
<b-h level="5">
h5. Bootstrap heading
</b-h>
<b-h level="6">
h6. Bootstrap heading
</b-h>
</template>
Paragraphs
すべての<p> 要素はmargin-topが削除され、margin-bottom: 1remを設定し、間隔を取りやすくしています。
This is an example paragraph.
This is an example paragraph.
<template>
<p>This is an example paragraph.</p>
<b-p>This is an example paragraph.</b-p>
</template>
Links
リンクにはデフォルトのcolorとアンダーラインが適用されます。リンクは:hoverで変化しますが、:visitedしたかどうかで変化することはありません。また、リンクには特別な:focusスタイルも適用されません。
<template>
<a to="/">This is an example link</a>
<hr />
<Anchor to="#">
This is an example link
</Anchor>
</template>
v5.3.xでは、リンクのcolorはrgba()と新しい-rgbCSS変数を使って設定され、リンクの色の不透明度を簡単にカスタマイズすることができます。リンクカラーの不透明度は、CSS変数--bs-link-opacityで変更できます。
<template>
<a
to="/"
style="--bs-link-opacity: .5"
>This is an example link</a>
<hr />
<Anchor
to="/"
style="--bs-link-opacity: .5"
>
This is an example link
</Anchor>
</template>
プレースホルダーリンク（hrefを持たないリンク）は、より具体的なセレクタでターゲットにされ、colorとtext-decorationはデフォルト値にリセットされます。
<template>
<a>This is an example link</a>
<hr />
<Anchor>This is an example link</Anchor>
</template>
Horizontal rules
<hr>要素が簡略化されました。ブラウザのデフォルトと同様に、<hr>は border-topによってスタイルされ、デフォルトのopacity: .25を持ち、colorによってborder-colorを自動的に継承します（親からcolorが設定されている場合も含む）。テキスト、ボーダー、不透明度のユーティリティで変更することができます。
<template>
<hr />
<div class="text-success">
<hr />
</div>
<hr class="border border-danger border-2 opacity-50" />
<hr class="border border-primary border-3 opacity-75" />
<div margin="y-5">
・
</div>
<b-hr />
<b-div text-color="success">
<b-hr />
</b-div>
<b-hr
border
border-color="danger"
border-width="2"
opacity="50"
/>
<b-hr
border
border-color="primary"
border-width="3"
opacity="75"
/>
</template>
Lists
すべてのリスト（ul、ol、およびdl）には、margin-topが削除され、margin-bottom: 1remが適用されます。ネストされたリストにはmargin-bottomがありません。ul要素とol要素のpadding-leftもリセットしました。
- All lists have their top margin removed
- And their bottom margin normalized
- Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
- The left padding has also been reset
- Here’s an ordered list
- With a few list items
- It has the same overall look
- As the previous unordered list
- All lists have their top margin removed
- And their bottom margin normalized
- Nested lists have no bottom margin
- This way they have a more even appearance
- Particularly when followed by more list items
- The left padding has also been reset
- Here’s an ordered list
- With a few list items
- It has the same overall look
- As the previous unordered list
<template>
<ul>
<li>All lists have their top margin removed</li>
<li>And their bottom margin normalized</li>
<li>
Nested lists have no bottom margin
<ul>
<li>This way they have a more even appearance</li>
<li>Particularly when followed by more list items</li>
</ul>
</li>
<li>The left padding has also been reset</li>
</ul>
<ol>
<li>Here’s an ordered list</li>
<li>With a few list items</li>
<li>
It has the same overall look
</li>
<li>As the previous unordered list</li>
</ol>
<hr />
<b-ul>
<b-li>All lists have their top margin removed</b-li>
<b-li>And their bottom margin normalized</b-li>
<b-li>
Nested lists have no bottom margin
<b-ul>
<b-li>This way they have a more even appearance</b-li>
<b-li>Particularly when followed by more list items</b-li>
</b-ul>
</b-li>
<b-li>The left padding has also been reset</b-li>
</b-ul>
<b-ol>
<b-li>Here’s an ordered list</b-li>
<b-li>With a few list items</b-li>
<b-li>
It has the same overall look
</b-li>
<b-li>As the previous unordered list</b-li>
</b-ol>
</template>
シンプルで、明確な階層構造、空白の改善のために説明リストのmarginが更新されました。 <dd>はmargin-leftを0にリセットし、margin-bottom: .5remを追加した。<dt>は太字になります。
- Description lists
- A description list is perfect for defining terms.
- Term
- Definition for the term.
- A second definition for the same term.
- Another term
- Definition for this other term.
- Description lists
- A description list is perfect for defining terms.
- Term
- Definition for the term.
- A second definition for the same term.
- Another term
- Definition for this other term.
<template>
<dl>
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Term</dt>
<dd>Definition for the term.</dd>
<dd>A second definition for the same term.</dd>
<dt>Another term</dt>
<dd>Definition for this other term.</dd>
</dl>
<hr />
<b-dl>
<b-dt>Description lists</b-dt>
<b-dd>A description list is perfect for defining terms.</b-dd>
<b-dt>Term</b-dt>
<b-dd>Definition for the term.</b-dd>
<b-dd>A second definition for the same term.</b-dd>
<b-dt>Another term</b-dt>
<b-dd>Definition for this other term.</b-dd>
</b-dl>
</template>
Inline code
インラインのスニペットコードは<code>で囲みます。HTMLの角括弧は必ずエスケープしてください。
<section> should be wrapped as inline. Code blocks
複数行のコードには<pre>を使用します。もう一度言いますが、適切なレンダリングのために、コード内の角括弧を必ずエスケープしてください。<pre>要素は、margin-topを削除し、margin-bottomにrem単位を使用するようにリセットされます。
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<template>
<pre><code style="color:black;"><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
</template>
Variables
変数を指定するには<var>タグを使用します。
<template>
<var>y</var>
=
<var>m</var>
<var>x</var>
+
<var>b</var>
</template>
User input
キーボードで入力するのが一般的な入力を示すには、<kbd>を使用します。
To edit settings, press ctrl + ,
Sample output
プログラムからのサンプル出力を示すには、<samp>タグを使用します。
<template>
<samp>
This text is meant to be treated as sample output from a computer program.
</samp>
</template>
Forms
Pointers on buttons
Rebootには、デフォルトのカーソルを pointerに変更するためのrole="button"の機能拡張が含まれています。この属性を要素に追加することで、要素がインタラクティブであることを示すのに役立ちます。このロールは<button>要素には必要ありません。
<template>
<span
role="button"
>Non-button element button</span>
</template>
Misc elements
Address
<address>要素が更新され、ブラウザのデフォルトのfont-styleがitalicからnormalにリセットされました。line-heightも継承され、margin-bottom. 1remが追加されました。<address>最も近い祖先（またはbody全体）の連絡先情報を提示するためのものです。 行を<br>で終了することにより、フォーマットを保持します。
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Full Name
first.last@example.com
<template>
<address>
<strong>Twitter, Inc.</strong>
<br />
1355 Market St, Suite 900
<br />
San Francisco, CA 94103
<br />
<abbr title="Phone">P:</abbr>
(123) 456-7890
</address>
<address>
<strong>Full Name</strong>
<br />
<a href="mailto:first.last@example.com">first.last@example.com</a>
</address>
</template>
Blockquote
引用文のデフォルトのmarginは1em 40pxなので、これを0 0 1remにリセットして、他の要素との整合性をとります。
A well-known quote, contained in a blockquote element.
Someone famous in Source Title
<template>
<BBlockquote>
<b-p>A well-known quote, contained in a blockquote element.</b-p>
</BBlockquote>
<b-p>
Someone famous in
<cite title="Source Title">Source Title</cite>
</b-p>
</template>
Inline elements
<abbr>要素は、段落テキストの中で目立つように基本的なスタイリングを受けます。
<template>
The
<abbr title="HyperText Markup Language">HTML</abbr>
abbreviation element.
</template>