Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

Reboot (リブート)

要素固有のCSSの変更がまとめられたFileです。

目次

Approach

Normalize.css に基づき, デフォルトのスタイルを利用しながら, 要素セレクタを用いてあらゆる要素のスタイルを正常化しています。スタイルが必要なときはクラスに追加します。 例えば <table> 要素はシンプルな作りになっていて, スタイルを適用したいときは .table , .table-bordered などが用意されています。

Rebootを適用するガイドラインがあります。

Page defaults

<html>, <body> 要素は, ページ全体のベースがより良くなるように適用されます。

Native font stack

Bootstrapは “native font stack” や"system font stack” を利用して、あらゆるデバイスやOSで最適なテキスト描画を実現しています。 これらのシステムフォントは、最新のデバイスを念頭に置いて特別に設計されており、画面上でのレンダリングの改善、可変フォントのサポートなどが行われています。 詳細は native font stacks in this Smashing Magazine article.

$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",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

この font-family<body> に適用されると、 自動的に全体に継承されます。 基本の font-family を切り替えるには $font-family-base を変更してコンパイルします。

Headings and paragraphs

見出し(例: <h1> )と段落 <p> では, margin-top がリセットされ, 見出しでは margin-bottom: .5rem , 段落では margin-bottom: 1rem が適用されます。

Heading Example
<h1></h1> h1. Bootstrap heading
<h2></h2> h2. Bootstrap heading
<h3></h3> h3. Bootstrap heading
<h4></h4> h4. Bootstrap heading
<h5></h5> h5. Bootstrap heading
<h6></h6> h6. Bootstrap heading

Lists

<ul>, <ol>, <dl>margin-top がリセットされ, margin-bottom: 1rem が適用されます。 リストが入れ子になっている場合は、 margin-bottom はリセットされます。同様に <ul><ol> 要素の padding-left もリセットしました。

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus 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. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

シンプルで、明確な階層構造、 空白の改善のために説明リストの margin が更新されました。 <dd>margin-left0 にリセットし、margin-bottom: .5rem を追加した。<dt>太字 です。

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Inline code

コードのインラインスニペットを <code> で囲みます。HTMLの角括弧は必ずエスケープしてください。

For example, <section> should be wrapped as inline.
For example, <code>&lt;section&gt;</code> 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>
<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>

Variables

変数を指定するには <var> タグを使用します。

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

User input

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

To switch directories, type cd followed by the name of the directory.
To edit settings, press 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>

Sample output

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

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

Tables

テーブルは, <caption> , 罫線 , text-align の確保のためにスタイルが調整されます。 borders, padding, を変更する場合は the .table class を参考にしてください。

This is an example table, and this is its caption to describe the contents.
Table heading Table heading Table heading Table heading
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell

Forms

様々なフォーム要素が、よりシンプルなベーススタイルになりました。ここでは、注目すべき変更点をいくつか紹介します。

Example legend

100

Date & color input support

Keep in mind date inputs are not fully supported by all browsers, namely Safari.

Pointers on buttons

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

Misc elements

Address

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

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Full Name
first.last@example.com

Blockquote

デフォルトの margin1em 40px なので、他の要素との整合性を保つために 0 0 1rem にリセットします。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Inline elements

<abbr> 要素は、段落テキストの中で目立つように基本的なスタイリングを受けます。

Nulla attr vitae elit libero, a pharetra augue.

Summary

デフォルトの cursortext なので、これを pointer にリセットして、要素がクリックすることで対話できることを伝えます。

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 [hidden] attribute

HTML5では display: nonea new global attribute named [hidden] が追加されています。 PureCSS にアイデア使用して、デフォルトを改善し、displayが誤ってオーバーライドされるのを防ぐのに役立ちます。

<input type="text" hidden>
jQuery incompatibility

[hidden] はjQueryの $(...).hide()$(...).show() メソッドと互換性がないため,現在のところ, jQueryで使用することは推奨していません。

要素の可視性を切り替えるため display は変更されず, 文書の流れに影響を与えます。代わりに the .invisible class を使います。