はじめに
世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。
はじめる
CDN, パッケージマネージャ, ダウンロードなど様々な方法でプロジェクトをすぐに始めることができます。
CSS
<link>
を <head>
内側に他のスタイルシートよりも先に入れてください。
JS
いくつかのコンポーネントで jQuery, Popper.js などの JavaScript プラグインが必要です。<script>
を </ body>
の直前に順番通りに入れてください。
jQuery はスリム版を使っていますが, フル版でも構いません。
jQuery, Popper.js などが必要なコンポーネントを知りたければ, 以下の「コンポーネントを表示」リンクをクリックしてください。 ページの構造などで不明な点がある場合は, サンプルページを参照してください。
bootstrap.bundle.js と bootstrap.bundle.min.js には Popper.js が含まれていますが jQuery は含まれていません。 Bootstrap に含まれている詳細は, コンテンツのセクションを参照してください。
JavaScript を必要とするコンポーネントを表示
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality
- Carousel for all slide behaviors, controls, and indicators
- Collapse for toggling visibility of content
- Dropdowns for displaying and positioning (also requires Popper.js)
- Modals for displaying, positioning, and scroll behavior
- Navbar for extending our Collapse plugin to implement responsive behavior
- Tooltips and popovers for displaying and positioning (also requires Popper.js)
- Scrollspy for scroll behavior and navigation updates
スターターテンプレート
最新のデザインと仕様を確認してください。HTML5 で viewport を使った次のようなコードをおすすめします。
ページに必要なのはこれだけです。 詳しくは レイアウト または サンプル を参照してください。
重要なグローバル設定
Bootstrap はグローバル設定を使用しています。これらはクロスブラウザスタイルのリセットと正規化に必要です。
HTML5 doctype
Bootstrap は HTML5 doctype を使用する必要があります。 使用しないと, 不完全にスタイリングされ大きな問題を引き起こすかもしれません。
レスポンシブ用メタタグ
Bootstrap はモバイルファーストで作られています。まずモバイル用にコードを最適化し, 必要に応じて CSS メディアクエリを使ってコンポーネントのスケールアップを実現しています。
適切なレンダリングとすべてのデバイスのズームのタッチを確実にするには viewport 用メタタグを <head>
に追加します。
スターターテンプレートで実際に動作します。
ボックスサイズ
サイズ指定を簡単にするために, グローバルなボックスサイズを content-box
から border-box
に変更します。
これにより, 要素のレイアウト計算に影響することはありませんが Google マップや Google カスタム検索エンジンなどのサードパーティ製ソフトウェアで問題が発生する可能性があります。
上書きする必要がある場合は。次を使用してください:
上記のスニペットでは, ::before
と ::after
で生成されたコンテンツを含むネストされた要素は, .selector-for-some-widget
に対して指定されたボックスサイズを継承します。
ボックスモデルとサイジングの詳細については CSS Tricks をご覧ください。
リセット
ブラウザやデバイス間のレンダリング差異を吸収するため Reboot を使用して一般的な HTML 要素のリセットを行います。
コミュニティ
Bootstrap 開発について最新の情報を入手しコミュニティに参加することができます。
- Twitter アカウント @getbootstrap をフォロー
- The Official Bootstrap Blog を読む/登録
- the official Slack room に参加
- IRC なら
irc.freenode.net
サーバの##bootstrap
チャンネルで Bootstrap 仲間とチャット - Stack Overflow (
bootstrap-4
タグ) は開発の手助けになるでしょう。 - 開発者は npm や類似の仕組みを使って配布する際に
bootstrap
というキーワードを使って, パッケージが容易に検出されるようにしましょう。
あなたは最新の情報を @getbootstrap より得ることができます。
v4.2