Bootstrapファイルのインストール完全ガイド

このWikiHowでは、Bootstrapファイルをコンピュータにダウンロードし、HTMLテキストにリンクして、コードでBootstrap要素を使用する方法を説明します。Bootstrapファイルをダウンロードしてリンクすると、WebデザインでBootstrapのスタイルシートとJavaScript要素をすべて使用できるようになります。

知っておくべきこと

• インターネットブラウザでBootstrapのウェブサイトを開き、「ダウンロード」をクリックします。
• BootstrapファイルをZIPアーカイブとしてダウンロードし、フォルダから解凍します。
• 解凍したファイルをHTMLファイルと同じフォルダに移動し、リンクさせます。

1

インターネットブラウザでBootstrapウェブサイトを開きます。アドレスバーに入力し、キーボードの ↵ Enter キーまたは ⏎ Return キーを押します。

2

ダウンロードボタンをクリックします。ダウンロード」ページが開きます。

3

Compiled CSS and JS」の下にある「Download」ボタンをクリックします。これにより、Bootstrapファイル一式がZIPアーカイブとしてコンピューターにダウンロードされます。

• プロンプトが表示されたら、Bootstrap ZIPの保存場所を選択してください。

4

ZIPアーカイブからファイルを解凍します。ダウンロードしたZIPファイルを見つけてダブルクリックし、その中のすべてのファイルを同じフォルダに解凍します。

• "css "と "js "という2つのフォルダが展開されます。
• 解凍アプリが自動的にファイルを解凍しない場合は、ZIPアーカイブをエクスポートするすべての方法をご覧ください。

5

解凍したフォルダを、ウェブサイトのHTMLファイルと同じフォルダに移動します。ウェブサイトのHTMLファイルがすべて入っているフォルダを開き、「css」と「js」フォルダをここにドラッグして、ウェブサイトのドキュメントと同じフォルダに移動します。

• これで、これらのファイルをHTMLファイルにリンクして、コードでBootstrapを使い始めることができます。

6

Bootstrap で使用したい HTML ファイルを右クリックします。HTMLファイルの1つだけ、またはすべてでBootstrapを使用できます。

7

右クリックメニューの「Open with」にカーソルを合わせます。互換性のあるアプリのサブメニューがポップアップ表示されます。

8

テキストエディタを選択します。選択したHTMLファイルがテキストエディタで開かれます。

• メモ帳やテキストエディットのようなシンプルなテキストエディタでも、Atom（）やCoda（）のような専用のコードエディタでもかまいません。

9

HTML ファイルのヘッダーに Bootstrap リンクを追加します。HTMLでBootstrapのコードを使用する前に、以下の行をコードのヘッダーに入力するか、貼り付ける必要があります：

• <link rel="stylesheet" a href="css/bootstrap.css"/>
• <script src="js/bootstrap.js/></script
• cssとjsフォルダの他のファイルをリンクして使いたい場合、ヘッダに新しい行を追加し、css/bootstrap.cssとjs/bootstrap.jsの部分をリンクしたいファイル名に置き換えるだけです。

10

コード内のBootstrapリンクの配置を確認してください。HTMLのヘッダーでは、両方の行が<meta>行と<title>行の間に位置するはずです。

• これらの行をヘッダーに追加したら、この HTML ファイルで Bootstrap 要素を使い始めることができます。
• Bootstrap要素の全リストは、.NETで見ることができます。左メニューのレイアウトやコンポーネントなどのカテゴリーをクリックしてください。
• Bootstrapをインストールしたら、ここにあるコードを自分のコードに挿入したり、コピー＆ペーストすることができます。

この記事は、CC BY-NC-SAで公開されている「 A Complete Guide to Install Bootstrap Files」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。