はじめに

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

ビルドツール

Bootstrap は CSS や JavaScript のビルドシステムとして Grunt を使用し、ドキュメント記述のために Jekyll を使用しています。Gruntfile は、コードのコンパイル方法やテストの走らせ方などを含むフレームワークでの動作のための便利なメソッドを含んでいます。

ツールのセットアップ

Gruntfile を使い、ドキュメントをローカルで実行するためには、Bootstrap のソースファイルのコピーと Node と Grunt が必要です。次の手順に従ってください、あなたがロックするための準備が整っているはずです:

  1. 依存関係を管理するための Node をダウンロード、インストールします。
  2. npm install -g grunt-cli を実行して、Grunt コマンドラインツール grunt-cli をインストールします。
  3. ルートディレクトリ /bootstrap に移動し、package.json にリストされたローカル依存関係をインストールするために npm install を実行します。
  4. Ruby をインストールし、gem install bundler を実行して Bundler をインストールします。最後に bundle install を実行します。 これはすべてのRubyの依存関係(Jekyllやプラグイン)をインストールします。
    • Windows ユーザー: Jekyllを身につけるため、また、問題なく動作させるために この非公式ガイドを読んでください。

完了したら、コマンドラインから様々な Grunt コマンドを実行できるようになります。

Grunt を使う

Gruntfileには、次のコマンドとタスクが含まれます:

タスク 説明
grunt grunt は、ローカルでのテストの実行と、CSS と JavaScriptの /dist ディレクトリへのコンパイルを行います。 SassAutoprefixerUglifyJS を使用します。
grunt dist grunt dist は、コンパイル済みファイルとともに /dist ディレクトリを作成します。SassAutoprefixerUglifyJS を使用します。
grunt test PhantomJS の中で scss-lintESLintQUnit テストを実行します。(CIのために使用されます)
grunt docs jekyll serve 経由でドキュメンテーションをローカルで実行するときに使用される CSS や JavaScript や他のアセット のビルドやテストを行います。
grunt watch これはSassファイルを監視し、保存するたびにそれらを自動ビルドするための便利なメソッドです。

Sass コンパイラを変更

Bootstrap はデフォルトでは libsass でコンパイルされますが、TWBS_SASS 環境変数を設定することにより、伝統的なRuby Sassに参画することができます。2つの選択肢がサポートされています:

例えば、Ruby Sass で Bootstrap のテストとビルドを行うために TWBS_SASS=sass grunt を実行します。

Autoprefixer

Bootstrap は ビルド時に CSS プロパティにベンダープレフィックスを自動で追加するために Autoprefixer (Gruntfile や ビルドプロセスに含まれる) を使います。そうすることは、v3で見られるようなベンダーのミックスインが必要なくなり、CSS の重要なパーツを書くのが一度だけになることで、時間やコードを節約できます。

ローカルドキュメント

ドキュメントをローカルで実行するには、Markdownベースのファイルやテンプレートなど基本的なものを提供する柔軟な静的サイトジェネレータである Jekyll を使用する必要があります。始め方はこちら:

  1. Jekyll (サイトビルダー) と他のRubyの依存関係をインストールするには、上記のツールセットアップを実行します。
  2. コマンドラインで、ルートディレクトリである /bootstrap から、bundle exec jekyll serve を実行します。
  3. http://localhost:9001 をブラウザで開きます。ほら!

使い方をもっと学ぶには ドキュメント を読んでください。

トラブルシューティング

依存関係のインストールや Grunt コマンドの実行で問題が起きた場合は、前の依存関係バージョン(globalとlocal)をすべてアンインストールします。その後、npm install を再度実行してください。