デザインに便利な「Twitter Bootstrap」というものを使ってみました。

スポンサードリンク

最近知ったのですが、

Twitter Bootstrapという

CSSのフレームワークというものを使ってみました。

これは便利です。

スポンサードリンク

Twitter Bootstrapとは

Twitter Bootstrapは、そのままの通り、ツイッターを作っている米ツイッター社が

無償で提供しているCSSのフレームワークです。

見た目のデザインを簡単に調整してくれる

便利なツールです。

簡単に設置可能なツール

Twiiter Bootstrapは簡単に設置できます。

1.Bootstrapをダウンロード

まず、Twitter Bootstrapのサイトへ行きダウンロードします。

赤字の部分からダウンロードします。

圧縮ファイルを解凍すると「css」、「img」、「js」の3つのフォルダがあります。

「css」フォルダの中には

・bootstrap.css
・bootstrap.min.css
・bootstrap-responsive.css
・bootstrap-responsive.min.css

以上の4種類のファイルがあります。

このうち名前に「.min」が付いているものは

付いていないものの圧縮版です。

中身をしっかり見たいとか、付け加えたいという場合は

「.min」が付いていないものを使って下さい。

読み込みを早くしたいとかの場合は「.min」の付いているものを使って下さい。

また、「responsive」というのは

レスポンシブWebデザインとして使いたい場合に使用するものです。

「img」フォルダにはBootstrapで使うアイコンの画像があります。

「js」には

・bootstrap.js
・bootstrap.min.js

の2種類入っていますが、こちらもCSSのものと同じ

圧縮してあるものと、そうでないものです。

お好みでいいと思います。

僕はCSSもJSも圧縮しているものを使っています。

付け加えたかったっら、

別でファイル作ればいい話なので。

スポンサードリンク

自分のWEBサイトに設置

設置の仕方は簡単です。

HTMLファイルのhead内に読み込むだけです。

そんだけ！

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

上記のように読み込ませます。

jsファイルをbodyタグを閉じる直前に書いてあるのは

外部JSファイルはbodyタグの閉じる直前に書いた方が

読み込みで早くなるという話です。

普通であればこれで問題ないのですが、

Ajax使うときはhead内に書いてあった方が便利なので

僕はhead内に書いています。

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

以上のように書いています。

あとは、Twitter Bootstrapの公式サイトにあるように

クラス名を指定していったり、

マニュアルのようにタグを組んでいったりするだけです。