end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

bootstrap - 入手とinstall(設置?)

記事一覧→ http://d.hatena.ne.jp/end0tknr/20111016/1318729659

入手

bootstrap ver.1.3.0 ( twitter-bootstrap-v1.3.0-64-g70b1a6b.zip )は、次のurlから入手できます。
http://twitter.github.com/bootstrap/
https://github.com/twitter/bootstrap

twitter-bootstrap-v1.3.0-64-g70b1a6b.zip の構成は、主に次の通りです。

[endo@colinux twitter-bootstrap-70b1a6b]$ tree
.
|-- LICENSE
|-- Makefile
|-- README.md
|-- bootstrap.css
|-- bootstrap.min.css
|-- docs
|   |-- assets
|   |   |-- css
|   |   |   `-- docs.css
|   |   |-- ico
|   |   |   |-- bootstrap-apple-114x114.png
|   |   |   |-- bootstrap-apple-57x57.png
|   |   |   |-- bootstrap-apple-72x72.png
|   |   |   `-- favicon.ico
|   |   |-- img
|   |   |   |-- bird.png
|   |   |   |-- browsers.png
|   |   |   |-- example-diagram-01.png
|   |   |   |-- example-diagram-02.png
|   |   |   |-- example-diagram-03.png
|   |   |   |-- grid-18px.png
|   |   |   `-- twitter-logo-no-bird.png
|   |   `-- js
|   |       |-- application.js
|   |       `-- google-code-prettify
|   |           |-- prettify.css
|   |           `-- prettify.js
|   |-- index.html
|   `-- javascript.html
|-- examples
|   |-- container-app.html
|   |-- fluid.html
|   `-- hero.html
|-- js
    |-- bootstrap-alerts.js
    |-- bootstrap-dropdown.js
    |-- bootstrap-modal.js
    |-- bootstrap-popover.js
    |-- bootstrap-scrollspy.js
    |-- bootstrap-tabs.js
    |-- bootstrap-twipsy.js

設置

bootstrapの基本機能は、bootstrap.css があれば利用でき、js以下にある bootstrap-alerts.js 等のjavascript群は必要に応じてincludeして下さい。
例えば、docs/index.html では、bootstrapの機能を解説していますが、ヘッダは次のように記載されています。(一部、私が書き換えています)

【必要最低限の例】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link href="../bootstrap.css" rel="stylesheet"> <!--bootstrap本体-->
  </head>

  <body>
  ...
  </body>
</html>

【twitter-bootstrap-70b1a6b/docs/index.html の例】

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>

    <!-- ie8以下でdom認識しないhtml5 elementを認識するもの(表示はできません) -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <link href="../bootstrap.css" rel="stylesheet"> <!--bootstrap本体-->
    <!--この説明ページ用のスタイルシートです。実際の開発には必要ありません-->
    <link href="assets/css/docs.css" rel="stylesheet">
    <!--google製のソース色付けライブラリ-->
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet">

    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>

    <!--table内行の並び替え機能を提供-->
    <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js">
    </script>

    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script>$(function () { prettyPrint() })</script>

    <!--ドロップダウンメニュ機能を提供-->
    <script src="../js/bootstrap-dropdown.js"></script>
    <!--ツールチップ機能を提供-->
    <script src="../js/bootstrap-twipsy.js"></script>
    <!--ある座標にスクロールすると、イベント発生-->
    <script src="../js/bootstrap-scrollspy.js"></script>

    <!--この説明ページ用のjavascriptです。実際の開発には必要ありません-->
    <script src="assets/js/application.js"></script>

    <link rel="shortcut icon" type="image/x-icon" href="assets/ico/favicon.ico">
    <link rel="apple-touch-icon" href="assets/ico/bootstrap-apple-57x57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/ico/bootstrap-apple-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/ico/bootstrap-apple-114x114.png">
  </head>

  <body>
  ...
  </body>
</html>