リブート

Reboot は要素固有の CSS 変更を 1 つのファイルにまとめたもので、Bootstrap をキックスタートして、構築するためのエレガントで一貫性のあるシンプルなベースラインを提供します。

このページでは

アプローチ

Reboot は Normalize に基づいて構築され、要素セレクターのみを使用して、やや独断的なスタイルを持つ多くの HTML 要素を提供します。追加のスタイリングは、クラスでのみ行われます。たとえば<table>、よりシンプルなベースラインのためにいくつかのスタイルを再起動し、後で、などを提供.tableし.table-borderedます。

Reboot で何をオーバーライドするかを選択するガイドラインと理由は次のとおりです。

コンポーネントのスケーラブルな間隔に sremの代わりにsを使用するように、一部のブラウザのデフォルト値を更新します。em
避けてくださいmargin-top。垂直方向の余白が崩れ、予期しない結果が生じる可能性があります。しかし、より重要なことは、単一の方向性marginはより単純なメンタルモデルです。
デバイスサイズ間でのスケーリングを容易にするために、ブロック要素はrems にmargins を使用する必要があります。
font関連するプロパティの宣言を最小限に抑え、inherit可能な限り使用します。

CSS 変数

v5.1.1 で追加

v5.1.1 では、@importすべての CSS バンドル ( bootstrap.css、bootstrap-reboot.css、およびbootstrap-grid.cssincludeを含む) で必須のを標準化しました_root.scss。これにより、そのバンドルで使用されている CSS 変数の数に関係なく、すべてのバンドルにレベル CSS 変数が追加:rootされます。最終的に Bootstrap 5 は引き続き時間の経過とともに追加されたより多くの CSS 変数を参照してください。

ページのデフォルト

<html>要素と<body>要素が更新され、ページ全体のデフォルトが改善されました。すなわち：

は、およびをbox-sizing含むすべての要素でグローバルに設定されます。これにより、要素の宣言された幅がパディングまたは境界線によって決して超えられないことが保証されます。 *::before*::afterborder-box
- でベースfont-sizeは宣言されていません<html>が、16px想定されています (ブラウザのデフォルト)。ユーザーの好みを尊重し、よりアクセスしやすいアプローチを確保しながら、メディアクエリを介して簡単にレスポンシブ型スケーリングを行うためfont-size: 1remにに適用されます。<body>このブラウザのデフォルトは、$font-size-root変数を変更することでオーバーライドできます。
は<body>、グローバルfont-family、font-weight、line-height、およびも設定しcolorます。これは、フォントの不一致を防ぐために、後で一部のフォーム要素に継承されます。
安全のために、<body>には宣言されたがありbackground-color、デフォルトは#fffです。

ネイティブフォントスタック

Bootstrap は、「ネイティブフォントスタック」または「システムフォントスタック」を利用して、すべてのデバイスと OS で最適なテキストレンダリングを行います。これらのシステムフォントは、今日のデバイスを念頭に置いて特別に設計されており、画面でのレンダリングが改善され、バリアブルフォントがサポートされています。ネイティブフォントスタックの詳細については、 Smashing Magazineの記事を参照してください。

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

フォントスタックには絵文字フォントが含まれているため、多くの一般的な記号/絵文字の Unicode 文字が多色の絵文字としてレンダリングされることに注意してください。それらの外観は、ブラウザー/プラットフォームのネイティブ絵文字フォントで使用されるスタイルによって異なり、CSS スタイルの影響を受けませんcolor。

これfont-familyはに適用され、<body>Bootstrap 全体で自動的にグローバルに継承されます。グローバルを切り替えるには、Bootstrapfont-familyを更新して再コンパイルします。$font-family-base

CSS 変数

Bootstrap 5 が成熟し続けるにつれて、常に Sass を再コンパイルする必要なく、よりリアルタイムのカスタマイズを提供する手段として、CSS 変数を使用して構築されるスタイルがますます増えます。私たちのアプローチは、ソース Sass 変数を取得し、それらを CSS 変数に変換することです。そうすれば、CSS 変数を使用しなくても、Sass のすべての機能を利用できます。これはまだ進行中であり、完全に実装するには時間がかかります。

たとえば、一般的なスタイルの次の:rootCSS 変数を検討してください。<body>

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

実際には、これらの変数は Reboot で次のように適用されます。

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

これにより、好きなようにリアルタイムでカスタマイズできます。

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

見出しと段落

すべての見出し要素 (例: <h1>and )<p>がリセットされ、margin-top削除されます。見出しがmargin-bottom: .5rem追加され、段落margin-bottom: 1remが簡単に配置できるようになりました。

見出し	例
`<h1></h1>`	h1. ブートストラップの見出し
`<h2></h2>`	h2. ブートストラップの見出し
`<h3></h3>`	h3. ブートストラップの見出し
`<h4></h4>`	h4. ブートストラップの見出し
`<h5></h5>`	h5. ブートストラップの見出し
`<h6></h6>`	h6. ブートストラップの見出し

すべてのリストの上マージンが削除されています
そしてそれらの下マージンは正規化されました
ネストされたリストには下マージンがありません
- このようにして、より均一な外観になります
- 特に、その後にさらにリスト項目が続く場合
左パディングもリセットされました

これが順序付けられたリストです
いくつかのリスト項目で
全体的に同じような見た目です
前の順序なしリストとして

スタイルをシンプルにし、階層を明確にし、間隔を空けるために、説明リストmarginのが更新されました。<dd>s にリセットmargin-leftし0て追加しmargin-bottom: .5remます。<dt>は太字です。

説明リスト: 説明リストは、用語を定義するのに最適です。
学期: 用語の定義。; 同じ用語の 2 番目の定義。
別の用語: この他の用語の定義。

インラインコード

コードのインラインスニペットをでラップし<code>ます。HTML の山かっこは必ずエスケープしてください。

たとえば、 <section>インラインとしてラップする必要があります。

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

コードブロック

<pre>複数行のコードには s を使用します。繰り返しになりますが、適切にレンダリングするために、コード内の山かっこを必ずエスケープしてください。要素がリセットされ、その<pre>要素が削除され、その要素に単位がmargin-top使用されます。remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

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

変数

変数を示すには、<var>タグを使用します。

y = m x + b

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

ユーザー入力

を使用して、<kbd>通常はキーボードから入力される入力を示します。

ディレクトリを切り替えるには、 cd続けてディレクトリの名前を入力します。
設定を編集するには、を押します。 ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

サンプル出力

プログラムからのサンプル出力を示すには、<samp>タグを使用します。

このテキストは、コンピュータープログラムからのサンプル出力として扱われることを意図しています。

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

テーブル

テーブルはスタイルに合わせてわずかに調整され<caption>、境界線が折りたたまれ、一貫性が保たtext-alignれます。ボーダー、パディングなどの追加の変更は、.tableクラスに付属しています。

これは表の例で、内容を説明するためのキャプションです。
表の見出し	表の見出し	表の見出し	表の見出し
表のセル	表のセル	表のセル	表のセル
表のセル	表のセル	表のセル	表のセル
表のセル	表のセル	表のセル	表のセル

フォーム

シンプルな基本スタイルのために、さまざまなフォーム要素が再起動されました。最も注目すべき変更の一部を次に示します。

<fieldset>s にはボーダー、パディング、またはマージンがないため、個々の入力または入力グループのラッパーとして簡単に使用できます。
<legend>は、フィールドセットと同様に、ある種の見出しとして表示されるように再スタイルされました。
<label>s が適用display: inline-blockできるように設定されています。margin
<input>s、<select>s、<textarea>s、および<button>s はほとんど Normalize によって処理されますが、Reboot によってそれらのmarginおよび setも削除されline-height: inheritます。
<textarea>水平方向のサイズ変更はページレイアウトを「壊す」ことが多いため、垂直方向のみにサイズ変更できるように変更されています。
<button>と<input>ボタン要素にはcursor: pointerwhenがあります:not(:disabled)。

これらの変更点などを以下に示します。

日付と色の入力サポート

日付の入力は、すべてのブラウザー、つまり Safari で完全にサポートされているわけではないことに注意してください。

ボタン上のポインター

再起動にはrole="button"、デフォルトのカーソルをに変更するための拡張機能が含まれていますpointer。この属性を要素に追加して、要素がインタラクティブであることを示します。このロールは<button>、独自のcursor変更を取得する要素には必要ありません。

ボタン要素以外のボタン

<span role="button" tabindex="0">Non-button element button</span>

その他の要素

住所

<address>要素が更新され、ブラウザのデフォルトがからにリセットさfont-styleれitalicますnormal。line-heightも継承され、margin-bottom: 1rem追加されました。<address>s は、最も近い祖先 (または作業全体) の連絡先情報を提示するためのものです。で行を終了することにより、フォーマットを保持し<br>ます。

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

フルネーム
[email protected]

引用符

marginblockquotesのデフォルトはであるため、他の要素との一貫性を高める1em 40pxためににリセットします。0 0 1rem

blockquote 要素に含まれるよく知られた引用。

ソースタイトルで有名な人

インライン要素

この<abbr>要素は、段落テキストの中で目立つようにするための基本的なスタイルを受け取ります。

HTML略語要素。

概要

cursorsummaryのデフォルトはtextであるため、これをにリセットしpointerて、要素をクリックして操作できることを伝えます。

いくつかの詳細

詳細についての詳細情報。

さらに詳しく

詳細についてはこちら。

HTML5`[hidden]`属性

HTML5 は、という名前の新しいグローバル属性[hidden]を追加します。これは、デフォルトでスタイル設定さdisplay: noneれています。PureCSSからアイデアを借りて、誤って上書きされ[hidden] { display: none !important; }ないようにすることで、このデフォルトを改善します。display

<input type="text" hidden>

jQuery の非互換性

[hidden]$(...).hide()jQuery のおよび$(...).show()メソッドと互換性がありません。したがって、現在のところ、要素[hidden]を管理するための他の手法を特に推奨していません。display

要素の可視性を切り替えるだけで、要素displayが変更されず、要素がドキュメントの流れに影響を与える可能性がある場合は、代わりにクラスを使用します。.invisible

リブート

アプローチ

CSS 変数

ページのデフォルト

ネイティブ フォント スタック

CSS 変数

見出しと段落

リスト

インライン コード

コードブロック

変数

ユーザー入力

サンプル出力

テーブル

フォーム

日付と色の入力サポート

ボタン上のポインター

その他の要素

住所

引用符

インライン要素

概要

HTML5[hidden]属性

jQuery の非互換性

ネイティブフォントスタック

インラインコード

HTML5`[hidden]`属性