Bootstrap3 導入の仕方

1. 公式サイトからファイルをダウンロードする

まずは、公式サイトより、「Bootstrap3」をダウンロードします。

公式サイトの「Download Bootstrap」をクリックしてダウンロードする。
まずは、公式サイト(//getbootstrap.com/)にアクセスして「Download Bootstrap」をクリックし、ファイルを任意の場所に保存します。

2. フォルダの解凍&中身の確認

Bootstrap ファイル

次に、ダウンロードしたファイルを解凍します。Windows なら、ファイルを右クリックして、「すべて展開」をクリックし、画面の指示に従えば、ファイルを解凍できます(詳しくは、検索サイトなどで「Windows(または、Mac) フォルダ 解凍」と検索してみてください)。

そして、解凍されたフォルダの中身を見てみると、左のようになっています。

3. 使用するフォルダを取り出す

BootstrapSiteフォルダの中身

今回、「assets」フォルダと「dist」フォルダのみを使用します。

まず、デスクトップなどに、Bootstrap を使ったサイトを入れておくフォルダを作成します(今回は、「BootstrapSite」フォルダにします)。

次に、先程作成したフォルダの中に、「assets」フォルダを入れ、そして、「dist」フォルダの中身のみを入れます。

最終的に以下のようになります。

2014/09/09 追記:以下のフォルダ構成に誤りがあったのを修正。

  • BootstrapSite フォルダ
    • assets フォルダ
    • css フォルダ( 「dist」フォルダの中身 )
    • fonts フォルダ( 「dist」フォルダの中身 )
    • js フォルダ( 「dist」フォルダの中身 )

4. index.html を作成

そして、「BootstrapSite」フォルダに「index.html」を作成します。

Windows なら、「メモ帳」を起動して、ファイルメニュー→「名前をつけて保存」で、文字コードを「UTF-8」に設定して、ファイル名を「index.html」にして、保存してください。

5. テキストエディタもインストール

おそらく、このページを見ている方は、ネット上に公開されている無償または有償のテキストエディタを使っているかと思いますが、Windows標準の「メモ帳」は、避けたほうがいいです。

検索サイトで「html エディタ」のように検索して、ダウンロードし、それを使いましょう。

つづく...

基本のHTMLコードに続きます。次回は、HTMLのベースを書いていきましょう。

Copyright © 2014 SofPyon, All Rights Reserved.