Bootstrap 4の利用準備(ソースコード版)

Bootstrapの利用準備(クイック)では、CDN(ネットワーク)からCSSやJavaScriptファイルを読み込みました。
今回は必要なファイルをダウンロードし読み込む方法をご紹介します。
よく分からない方はCDNからの読み込みを利用しても問題はないので、次の章にお進みください。


ソースコードをダウンロードする方法は2通りあります。
1つ目は「コンパイル済みのCSSとJS」をダウンロードし読み込む方法です。
特にCSSや、JavaScriptファイルの変更をせず、自社のWebサーバーに設置し、読み込む場合です。

2つ目は、ソースコードをダウンロードし、CSSやJavaScriptファイルを自社用にカスタマイズし使う方法です。

コンパイル済みのCSS、JSを使う場合

  1. Bootstrap 4 ドキュメントのDownloadにアクセスします。
     
  2. Compiled CSS and JSの「Download」をクリックします。
  3. ダウンロードしたファイルを解凍し、「css/bootstrap.min.css」と、「js/bootstrap.min.js」を読み込みます。
     
  4. CSSファイルの一覧
    ファイル名 Layout Content Components Utilities
    bootstrap.min.css Included Included Included Included
    bootstrap-grid.min.css グリッドシステムのみ 含まれない 含まれない flexユーティリティのみ
    bootstrap-reboot.min.css 含まれない Rebootのみ 含まれない 含まれない
    Layout(グリッドシステム)のみBootstrapを利用したい場合は、bootstrap-grid.min.cssをお使いください。

ソースコードの利用

下記リンクよりSource filesをダウンロードします。

ソースコードのダウンロード

ダウンロードし、ファイルを展開すると下記のフォルダ構造が展開されます。

Bootstrapで使うCSSやJavaScriptファイルは「/dist」ディレクトリに格納されます。

ビルドツールのセットアップ

またSCSSや、JavaScriptファイルを変更後には、ファイルのコンパイルが必要です。
コンパイルは色々な方法がありますが公式サイトにもセットアップ方法が記載されていますので、今回はこちらを紹介します。
https://getbootstrap.com/docs/4.0/getting-started/build-tools/#tooling-setup

  1. NPMスクリプトを使うので、Node.jsをインストールします。
    npmの確認はnpm –v とコマンドラインに入力します。
    $ node -v
      v8.9.0
    $ npm –v
      5.5.1
    
    Node.jsのダウンロード
  2. Sourceファイルをダウンロードしたディレクトリを「/bootstrap」にし、package.json を設置します。 準備が整ったら下記コマンドを実行します。
    $ npm install
    
  3. 次にBundlerをインストールします。(gemの利用はRubyが必要です。)
    $ gem install bundler
    
    Bundlerのインストールが完了したら下記コマンドを実行します。
    $ bundle install
    

以上でセットアップの完了です。Windowsユーザーの方は下記サイトを参考にしてください。
https://jekyllrb.com/docs/windows/

ビルドツールの利用


ビルドツールのセットアップ後に下記コマンドを実行すると「/dist」ディレクトリを作成し、コンパイルファイルを格納します。

$ npm run dist

ファイルの生成はSassのコンパイル、ベンダープレフィクス、JavaScritpの圧縮、EcmaScript6を5にコンパイル、ESLintを使った検証などが自動で動きます。

(例)
ボタンのスタイルを変更したい場合
「/scss/utilityes/_buttons.scss」を修正後、下記コマンドを実行します。

$ npm run dist

「/dist/css/bootstrap.css」等のファイルが変更されます。

下記コマンドでローカル環境のドキュメントサイトを立ち上げることもできます。

$ npm run docs-serve

Server addressに表示されているアドレスにアクセスすると( http://127.0.0.1:9001/)ローカルのドキュメントサイトが表示されます。

 

コンテンツをシェア


このエントリーをはてなブックマークに追加