in English

リブート

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,
  // 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

見出しと段落

すべての見出し要素 (例: <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.

  • すべてのリストの上マージンが削除されています
  • そしてそれらの下マージンは正規化されました
  • ネストされたリストには下マージンがありません
    • このようにして、より均一な外観になります
    • 特に、その後にさらにリスト項目が続く場合
  • 左パディングもリセットされました
  1. これが順序付けられたリストです
  2. いくつかのリスト項目で
  3. 全体的に同じような見た目です
  4. 前の順序なしリストとして

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

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

整形済みテキスト

要素がリセットされ、その<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

ボタン上のポインター

再起動には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>要素は、段落テキストの中で目立つようにするための基本的なスタイルを受け取ります。

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