はじめてのBootStrapインストール(導入)手順

css

CSSフレームワークのBootStrapの導入手順を紹介します。
CSSのデザインは、非デザイナのエンジニアの方が一番悩んでいることではないでしょうか。
BootStrapを使うことで、今風のカッコイイUIが簡単につくれます。
非デザイナには敷居の高いwebレスポンシブもBootStrapを使うことで簡単に実現出来ます。
UIのデザインであれこれ悩んでいるかたは是非導入しましょう!

[スポンサーリンク]

この章でやること

BootStrapのインストール(導入)手順を解説します。

BootStrapのCSSを取得する。

まずは、こちらのサイトにアクセスして、CSSファイルを取得しましょう。

サイトへアクセスしたら、赤枠のボタンをクリックします。
これでCSSファイルのダウンロードが完了します。
Bootstrap2

BootStrapを導入する。

先ほどダウンロードしたzipファイルを解凍すると、cssやjsファイルが入っています。

Bootstrap3

BootStrapのcss・js・imageファイルを自分の環境へ配置しましょう。

Bootstrap4

BootStrapを読込むファイル(html)へこちらを記述します。
BootStrapはjQueryに依存しているため、jQueryも読込みましょう。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

BootStrapを使った簡単なサンプルを作ってみる

テキストボックスとボタンを表示してみます。
こちらのソースをコピペして使って、htmlファイルを作って下さい。

<!doctype html>
<html>
<head>
<meta charset="utf-8" content="">
<title>bootstrap example!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" ></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>

</head>

<!-- HTML部分 -->
<body>
    <h1>入力フォーム</h1>
    <form>
        <fieldset>
            <label>Label name</label>
            <input type="text" placeholder="Type something…">
            <br/>
            <button class="btn btn-large btn-primary" type="button">Large button</button>
        </fieldset>
    </form>


</body>
</html>

実行結果

テキストボックスにカーソルをあてると、テキストボックスの周りが青くなります。
ボタンは画像を使っていません。BootStrapのCSSで表現しています。

Bootstrap5

参考

BootStrapは他にもチェックボックスやラジオボタンなども装飾できます。
BootStrapの本家でサンプルソースが用意されています。

ダウンロード

今回紹介したソースをGitHubでサンプルソースを公開しています。こちらからご自由にダウンロードして下さい。
WebContent > bootstrap-example.html でチェックボックスやラジオボタンなどを装飾しています。
WebContent > bootstrap-responsive.html はWebレスポンシブのサンプルソースです。

公式サンプルソース

BootStrapが提供している、公式サンプルソースの取得方法を解説しています。
一からページを作成するのが面倒!という方は是非参考にして下さい。
BootStrapのサンプルソースを取得して雛形として使う方法

さいごに

BootStrapの導入はいかがでしたか?簡単すぎて拍子抜けしたかと思います。

私は最近BootStrapを使ってみました。BootStrapのシンプルさとクールさは、業務系アプリのUIでも十分活用できるなぁと直感的に感じました。
自社のみで使用する業務系アプリは、デザイナをアサインしていないせいか、デザインがいけていないことが多いです。
業務系アプリでもBootStrapを活用していけば、今風のクールなUIに仕上がり、オペレーターからも喜ばれるはずです!
システムも見た目が大事!
それでは!