Source

リブート

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

アプローチ

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

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

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

ページのデフォルト

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

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

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

デフォルトの Web フォント (Helvetica Neue、Helvetica、および Arial) は、Bootstrap 4 で削除され、すべてのデバイスと OS で最適なテキスト レンダリングを行うために「ネイティブ フォント スタック」に置き換えられました。ネイティブ フォント スタックの詳細については、 Smashing Magazineの記事 を参照してください。

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

見出しと段落

すべての見出し要素 (例: <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. ブートストラップの見出し

リスト

すべてのリスト<ul>— 、<ol>、および<dl>— はmargin-top削除され、margin-bottom: 1rem. ネストされたリストにはmargin-bottom.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • マッサで整数痴漢ロレム
  • プレチウム ニスル アリケのファシリシス
  • Nulla volutpat aliquam velit
    • インゲンマメ iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. マッサで整数痴漢ロレム
  4. プレチウム ニスル アリケのファシリシス
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

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

説明リスト
説明リストは、用語を定義するのに最適です。
ユースモッド
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
マレスアダ ポルタ
Etiam porta sem malesuada magna mollis euismod.

整形済みテキスト

要素がリセットされ、その<pre>要素が削除され、その要素に単位がmargin-top使用されます。remmargin-bottom

.example-要素 {
  margin-bottom: 1rem;
}

テーブル

テーブルはスタイルに合わせてわずかに調整され<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)。

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

凡例の例

100

その他の要素

住所

<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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 整数は前もって計算します。

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

インライン要素

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

Nulla attr vitae elit libero、pharetra augue。

概要

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

いくつかの詳細

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

さらに詳しく

詳細についてはこちら。

HTML5[hidden]属性

HTML5 は、 という名前の新しいグローバル属性[hidden]を追加します。これは、デフォルトでスタイル設定さdisplay: noneれています。PureCSSからアイデアを借りて、誤って上書きされ[hidden] { display: none !important; }ないようにすることで、このデフォルトを改善します。displayIE10 ではネイティブにサポートされて[hidden]いませんが、CSS の明示的な宣言により、この問題を回避できます。

<input type="text" hidden>
jQuery の非互換性

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

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