概要

新規作成日 2017-01-05

最終更新日 2017-01-22

Bootstrap CDNとテンプレート・スターター・ページで、レスポンシブ、モバイル・ファースト・サイトに構築するための世界で最も人気があるフレームワーク、Bootstrapを使い始めましょう。

クイックスタート

Quick start

あなたのプロジェクトに、Bootstrapをすばやく追加したいですか？MaxCDNの人々によって無料で提供されているBootstrap CDNを使用します。パッケージ・マネージャーを使用するか、ソースファイルをダウンロードする必要がありますか？ダウンロード・ページに進みます。

CSS

他のすべてのスタイルシートが、私たちのCSSを読み込む前に、あなたの<head>に、スタイルシートの<link>をコピー＆ペーストします。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

私たちのコンポーネントの多くは、動作するためにJavaScriptを使用する必要があります。特に、それらは、jQuery、Popper.jsと私たち自身のJavaScriptプラグインが必要です。それらを有効にするために、右の終了</ body>タグの前に、次の<script>をページの最後に配置します。jQueryが最初に、その次にPopper.js、そして、私たちのJavaScriptプラグインが来る必要があります。

私たちは、jQueryのスリム・ビルドを使用しましたが、フルバージョンもサポートされています。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

どのコンポーネントが、明確に、jQuery、私たちのJSとPopper.jsを必要とするか興味がありますか？以下の「コンポーネントを表示」リンクをクリックします。あなたが、一般的なページ構造について全くわからない場合、続けて、サンプルのページテンプレートを読んでください。

JavaScriptが必要なコンポーネントを表示する

閉じる際の警告
ボタンのためのトグルの状態とチェックボックス/ラジオ機能
すべてのスライド動作、コントロールとインジケータのためのカルーゼル
内容の表示属性を切り換えるための折りたたみ
表示と位置決めのためのドロップダウン（また、Popper.jsを必要とします）
実装に反応する動作に私達のCollapseプラグインを拡張することのためのナビゲーション・バー
ツールチップと表示することのためのポッポウバーと位置決め（また、Popper.jsを必要とします）
スクロール動作とナビゲーションの更新のためのScrollspy

スターター・テンプレート

Starter template

最新のデザインと開発標準で、あなたのページを確実に設定して下さい。HTML5 doctypeを使用して、適切なレスポンシブ動作のためのビューポート・メタ・タグが含まれていることを示しています。すべて一緒に、それを配置し、そして、あなたのページは、以下のように見えているはずです。：

<!doctype html>
<html lang="en">
  <head>
    <title>Hello, world!</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  </body>
</html>

全体のページ必要条件は、これだけです。あなたのサイトの内容とコンポーネントを配置を開始するために、Layoutドキュメントや私たちの公式の例を訪問して下さい。

全域で重要なこと

Important globals

Bootstrapは、使用するとき、あなたが認識する必要がある少数の重要なグローバル・スタイルと設定を使用します。これらはすべて、ほぼ独占的に、クロスブラウザスタイルの正規化に向けられています。

さあ、始めましょう。

HTML5 doctype

Bootstrapは、HTML5 doctypeの使用する必要があります。それが無ければ、あなたは、いくつかの型破りな不完全なスタイルを見ることになりますが、それが、大きな問題を発生させないことが含まれています。

<!doctype html>
<html lang="en">
  ...
</html>

レスポンシブ・メタ・タグ

Responsive meta tag

Bootstrapは、モバイル・ファーストで開発されています。私たちが、まずモバイル機器のためのコードを最適化する戦略そして、その次に、CSSメディア・クエリを使用して、必要に応じてコンポーネントを高性能にします。すべてのディバイスのために、適切なレンダリングとタッチ・ズームを確実に行うために、あなたのに、反応するビューポート・メタ・タグを追加します。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

あなたは、スターター・テンプレートで、この動作の例を確かめることができます。

Boxの大きさ

Box-sizing

CSSのための、更にわかりやすい大きさ変更のために、私たちは、content-boxからborder-boxまでグローバルなbox-sizing値を切り換えます。これは、パディングが、要素の幅に、確実に、最終的な計算に影響を及しませんが、それは、Google MapsとGoogleカスタム検索エンジンのような、いくつかのサードパーティ製のソフトウェアで問題が発生する可能性があります。

まれに、あなたは、次に示すような何かを使用して、それを上書きする必要があります。：

.selector-for-some-widget {
  box-sizing: content-box;
}

上記のスニペットでは、ネストされた要素－: :beforeと: :afterを使って生成された内容が含まれる－すべては、その.selector-for-some-widgetのために指定されたbox-sizingを継承します。

CSS Tricksで、ボックス・モデルとサイジングについての詳細について知る。

再起動

Reboot

改善されたクロスブラウザ・レンダリングのために、私たちは、共通のHTMLの要素に独断的な再設定をもう少し提供する、ブラウザやデバイス間の矛盾を修正するためにRebootを使用しました。

コミュニティ

Community

Bootstrapの開発に関して最新の状態を保ち、これらの役に立つ参考資料でコミュニティに連絡して下さい。

twitter上の@getbootstrapをフォローして下さい。
公式のBootstrapブログを読み込んで、購読して下さい。
公式のSlackルームに参加する
irc.freenode.netサーバー上の##bootstrapチャンネルで、IRCで仲間のBootstrapperと話します。
Stack Overflowで、実装のヘルプが、見つかるかもしれません。（bootstrap-4 タグが付いた）。
開発者は、最大限の発見のために、npmや同様の配信メカニズムを介して配信する場合、Bootstrapの機能を変更または追加するパッケージに対して、キーワードbootstrapを使用する必要があります。

また、あなたは、最新の無駄話とすばらしい音楽ビデオのために、twitter上で@getbootstrapをフォローすることができます。

ページトップへ Bootstrap4ドキュメント Next