SYSTEM238 / NOTES1 / WEB / bootstrap3の導入手順

NOTES1 PROG1
bootstrap3の導入手順
bootstrap3の導入手順と動作確認用のHTMLソース。

必要ライブラリの入手

各ファイルの配置

各ファイルのmin付き(~.min.xxx)は圧縮版。特に理由がなければ運用時はこれを使う。

minの付いてない(~.xxx)のが通常版、ソースを追いかけるときはこっちを使う。

mapファイル(~.xxx.map)はCoffeeScript等からコンパイルしたソースをデバッグするときに、生成されたJavaScriptソースコードから変換前のオリジナルソースの場所を知りたいときに使用する。
  → 参考:Safx / JavaScriptのSource Mapの内部表現について

気の利いた環境だと圧縮版を使っていてもソースを参照するときは通常版を表示してくれたりするので、省いたりしないで全ファイルを配置しておいた方が便利。

/css  
 ├ bootstrap.min.css  
 ├ bootstrap.css.map  
 └ bootstrap.css  
/font  
 ├ glyphicons-halflings-regular.eot  
 ├ glyphicons-halflings-regular.svg  
 ├ glyphicons-halflings-regular.ttf  
 └ glyphicons-halflings-regular.woff  
/js  
 ├ bootstrap.js  
 ├ bootstrap.min.js  
 ├ html5shiv.js  
 ├ html5shiv.min.js  
 ├ jquery-1.11.1.js ... JQueryは1.x系を使用する。2.x系はBootstrapが未対応。  
 ├ jquery-1.11.1.min.js  
 ├ respond.js  
 └ respond.min.js  

基本的なHTMLテンプレート

<!DOCTYPE html>
<html lang="ja">

<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="...">
<title>- Bootstrap3 TEST -</title>

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


<!-- HTML5 Shim and Respond.js 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="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
<![endif]-->

</head>


<body>

<div class="jumbotron">
    <h1><span class="glyphicon glyphicon-book"></span>Bootstrap3のテスト</h1>
    <div class="alert alert-info">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
        <p>Bootstrap3のテスト</p>
    </div>
</div>

<div class="container" style="margin-top:10px;">
    <div class="col-md-6" style="border: 1px solid #ccc;">col-md-6:1</div>
    <div class="col-md-6" style="border: 1px solid #ccc;">col-md-6:2</div>
</div>

<div class="container" style="margin-top:10px;">
    <div class="col-md-6" style="border: 1px solid #ccc;">col-md-6:1</div>
    <div class="col-md-4" style="border: 1px solid #ccc;">col-md-4:2</div>
    <div class="col-md-2" style="border: 1px solid #ccc;">col-md-2:3</div>
</div>

<div class="container" style="margin-top:10px;">
    <div class="col-sm-6" style="border: 1px solid #ccc;">col-sm-6:1</div>
    <div class="col-sm-4" style="border: 1px solid #ccc;">col-sm-4:2</div>
    <div class="col-sm-2" style="border: 1px solid #ccc;">col-sm-2:3</div>
</div>


<!-- jQuery Version 1.11.0 -->
<script src="/js/jquery-1.11.1.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>
<!-- Custom JavaScript -->

</body>

</html>

実行例

リンクをクリックしてください。新規Winで実行します。
http://www.sys238.jp/tools/bootstrap_test.html

参考

UIまで手の回らないプログラマのためのBootstrap 3実用ガイド

Bootstrap3を使い始めるとっかかりとしていいと思います。

要点よくまとまってボリュームもソコソコなので、朝から読み始めて昼過ぎにはテストページを作って色々と試せます。
ただ、サポートサイトなどが無いのでソースを一々手入力するのが面倒っちゃ面倒です。

本ページの「基本的なHTMLテンプレート」はこの本のList1-6を参考にしています。