さくさく理解する bootstrap 入門
Copyright (C) 2014 by Nobuhide Tsuda

　

　

Bootstrap とは

Bootstrap とは、HTML, CSS, JavaScript フレームワークだ。 レスポンシブデザインに対応し、少ない手間でかっちょいいページを作ることが出来るぞ。

ちなみに、本ページも Bootstrap を使用しているんだぞ。

セットアップ

  1. 公式ページの Download ページに行き、【Download Bootstrap】を押して zip ファイルをDL。
  2. DLしたzipファイルを展開

    3. 以下の様なファイルが含まれる

    dist/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    └── glyphicons-halflings-regular.woff
  3. dist/ 以下をサーバの適当な場所に設置する。

    4. 本稿では、ドキュメントルートに bootstrap というディレクトリを作り、その下に、css, js, fonts をコピーするものとして説明する。

Hello, World

先のDLページの少し下の方に、Basic template という節があり、そこに以下の Hello, World サンプルがありますので、コピペしてファイルを作りましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

全体は HTML5 形式になっています。文字コードは utf-8 です。元のテンプレートでは、ファイルと同じ位置に css, js, fonts があると仮定しています。
本稿では /bootstrap 下にそれらを配置することにしているので、修正しています。

また、jQuery が使用されており、ajax.googleapis.com のサイトを参照しています。 jQuery を自分のサイトに設置済みであれば、パスを適切に修正してください。

上記をブラウザで開くと、下図のように表示されます。なんの変哲も無い hello, world です。

　

　

参考

　

　

演習問題解答例

　

　

　

　

XXX