リブート
Reboot は要素固有の CSS 変更を 1 つのファイルにまとめたもので、Bootstrap をキックスタートして、構築するためのエレガントで一貫性のあるシンプルなベースラインを提供します。
アプローチ
Reboot は Normalize に基づいて構築され、要素セレクターのみを使用して、やや独断的なスタイルを持つ多くの HTML 要素を提供します。追加のスタイリングは、クラスでのみ行われます。たとえば<table>、よりシンプルなベースラインのためにいくつかのスタイルを再起動し、後で 、 などを提供.tableし.table-borderedます。
Reboot で何をオーバーライドするかを選択するガイドラインと理由は次のとおりです。
- コンポーネントのスケーラブルな間隔に s
remの代わりにsを使用するように、一部のブラウザのデフォルト値を更新します。em - 避けてください
margin-top。垂直方向の余白が崩れ、予期しない結果が生じる可能性があります。しかし、より重要なことは、単一の方向性marginはより単純なメンタル モデルです。 - デバイス サイズ間でのスケーリングを容易にするために、ブロック要素は
rems にmargins を使用する必要があります。 font関連するプロパティの宣言を最小限に抑え、inherit可能な限り使用します。
ページのデフォルト
<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
見出しと段落
すべての見出し要素 (例: <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. padding-lefton<ul>と<ol>elementsもリセットしました。
- すべてのリストの上マージンが削除されています
- そしてそれらの下マージンは正規化されました
- ネストされたリストには下マージンがありません
- このようにして、より均一な外観になります
- 特に、その後にさらにリスト項目が続く場合
- 左パディングもリセットされました
- これが順序付けられたリストです
- いくつかのリスト項目で
- 全体的に同じような見た目です
- 前の順序なしリストとして
スタイルをシンプルにし、階層を明確にし、間隔を空けるために、説明リストmarginの が更新されました。<dd>s にリセットmargin-leftし0て追加しmargin-bottom: .5remます。<dt>は太字です。
- 説明リスト
- 説明リストは、用語を定義するのに最適です。
- 学期
- 用語の定義。
- 同じ用語の 2 番目の定義。
- 別の用語
- この他の用語の定義。
インライン コード
コードのインライン スニペットを でラップし<code>ます。HTML の山かっこは必ずエスケープしてください。
<section>インラインとしてラップする必要があります。
For example, <code><section></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><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>変数
変数を示すには、<var>タグを使用します。
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>ユーザー入力
を使用して、<kbd>通常はキーボードから入力される入力を示します。
設定を編集するには、 を押します。 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>ます。
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 フルネーム
[email protected]
引用符
marginblockquotesのデフォルトは であるため、他の要素との一貫性を高める1em 40pxために にリセットします。0 0 1rem
blockquote 要素に含まれるよく知られた引用。
ソースタイトルで有名な人
インライン要素
この<abbr>要素は、段落テキストの中で目立つようにするための基本的なスタイルを受け取ります。
概要
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