Bootstrap3を自作のphpとかhtmlで使うための下準備をする

2014年7月23日2016年9月8日

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

Bootstrap3を使うと簡単にかっこいいフォームとかページができます。CMSではなくてちょっと自分用にphpで小さいプログラムを書いたり、あるいはちょっとしたhtmlを書いてみたいなと思ったときにBootstrap3を使うとよさそうです。

今まで何度か使ったことがあるのですが、しばらくすると忘れちゃうので（今がまさにその状態で(^_^;）、blogに書き留めるためにあらためてやりなおしてみます！

記事をざっと見る

そもそもBootstrap3ってなんだっけ？

というところからおぼえていません。ググります

ウィキペディア Bootstrap

BootstrapはウェブサイトやWebアプリケーションを作成するフリーソフトウェアツール集である。タイポグラフィ、フォーム、ボタン、ナビゲーション、その他構成要素やJavaScript用拡張などがHTML及びCSSベースのデザインテンプレートとして用意されている。

うーん、一言で言うと…言えませんが、JavaScriptとかCSSとかでhtmlの構成要素（ボタンとかフォームとか）をかっこよくしてくれる総合セットみたいなものでしょうか。

Bootstrap3とJqueryの準備

では早速準備をしましょう♪

Bootstrap3はJqueryも必要としますのでそちらも合わせて準備します。

ダウンロードする方法もあるのですが、ファイルを管理しなくてよくて簡単なリンクを貼る方法で準備しました。

CDNのリンクを貼る

参照：CDN（コンテンツデリバリーネットワーク）

Bootstrap公式サイト

で Download Bootstrap をクリックします。

ダウンロードページに移動します。

Bootstrap CDN という見出しの下にある、

Copy を押して、使うファイルのheader内にペーストします。そしてJquery行を付け加えます。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

こんな感じになりました。注意点としてはJquery行はBootstrapのjsより上に記述することです。

この方法ではBootstrapやJqueryのファイルをダウンロードする必要はありません。

*Jqueryについてはバージョンやダウンロードする時の方法についてこちらのページが分かりやすかったので参考にしてみて下さい。

jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など