はじめに

ダウンロード方法や使い方を含むBootstrapの概要や、いくつかの基本的なテンプレートや例など。

イントロダクション

ブートストラップは、レスポンシブでモバイルファーストなサイトやアプリケーションを構築するための世界で最も人気のあるフレームワークです。これまで以上に簡単にプロジェクトを開始するために、高品質のHTML、CSS、JavaScriptを見つけることができます。

Bootstrap CDNとテンプレートページですぐに開始する方法を示します。

目次

クイックスタート

素早くあなたのプロジェクトにBootstrapを追加しますか?MaxCDNの人々から無料で提供されたBootstrap CDNを使用できます。パッケージマネージャーを使うか、それともソースファイルをダウンロードしますか?ダウンロードページはこちら。

BootstrapのCSSを読み込むために、下記の<link>をコピーし、<head>内の他の全てのスタイルシートの読み込みより前に貼り付けます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">

ページの終わり付近、</body>タグの直前に、JavaScriptプラグインとjQueryを追加します。BootstrapのコードはjQueryに依存しているため、必ずjQueryを一番最初に配置してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

以上です — あなたはあなたのやり方でBootstrapサイトを構築できます。一般的なページ構造について不安があれば、ページテンプレート使用例を読み進めてください。

基本テンプレート

あなたのページに、最新のデザインと開発標準を設定しておく必要があります。その意味としては:

  • HTML5 doctype を使用します。
  • Internet Explorer で最新のレンダリングモードを使うように強制します。(詳しく)
  • viewportメタタグを活用します。

これらをすべて一緒に入れると、あなたのページには、次のようになります:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

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

    <!-- jQuery first, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
  </body>
</html>

あなたのサイトのコンテンツやコンポーネントのレイアウトを始めるにあたり、レイアウト使用例も参考にしてください。

重要なグローバル設定

Bootstrapは、使用する際に注意する必要がある少数の重要なグローバルなスタイルと設定を採用しており、これらのすべてがほぼ独占的にクロスブラウザスタイルの標準化のために作られています。

HTML5 doctype

Bootstrapは、HTML5のdoctypeを使用する必要があります。 使用しないと不完全なスタイルが表示されることがありますが、HTML5のdoctypeを使用すれば重大な問題が発生することはありません。

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

レスポンシブ用metaタグ

Bootstrapは、モバイルファーストで開発されています。モバイルデバイスを一番に考慮してコードを最適化し、その後必要に応じてCSSメディアクエリを使用してコンポーネントを拡大する戦略です。すべてのデバイスに対して適切なレンダリングとタッチによるズームを確実にするために、<head>内にviewport metaタグを追加します。

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

基本テンプレート内の動作で、この例を見ることができます。

Box-sizing

CSSでのより直接的なサイジングについては、globalなbox-sizingの値をcontent-boxからborder-boxに切り替えます。これは、paddingが要素の最終計算済みの幅に影響を与えないことを確実にするものですが、Google MapやGoogleカスタム検索エンジンなどのサードパーティ製ソフトウェアの問題を引き起こす可能性があります。

まれに、以下のようなものを使用してオーバーライドする必要があります:

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

上記のコードでは、ネストされた要素(:before:afterによって生成されたコンテンツを含む)は、 .selector-for-some-widgetクラスに指定されたbox-sizingを全て継承します。

BoxサイジングのCSSトリック

Normalize.css

改良されたクロスブラウザのレンダリングについては、ブラウザやデバイス間の小さな不整合を修正するために、Normalize.cssを使用しています。その上にさらに、Rebootでやや独特のスタイルを構築しています。

コミュニティ

Bootstrap の開発環境を最新にして、役立つリソースのあるコミュニティにも手を伸ばしましょう。

  • Twitter @getbootstrapをフォロー
  • 公式 Bootstrap ブログを読む
  • 公式 Slack ルームに参加
  • IRCでBootstrapper仲間とチャット。irc.freenode.netサーバの、##bootstrapチャンネルで。
  • 実装のヘルプはスタックオーバーフローで見つけることができます。(bootstrap-4タグ)
  • 開発者は、Bootstrapの機能を改造したり追加したパッケージをnpmなど似たような配信メカニズムでの配布するときは、bootstrapキーワードを使うようにし、最大限見つけやすくします。

最新の噂話やすばらしいミュージックビデオのために、Twitter @getbootstrapをフォローすることもできます。