Twitter Bootstrapの雛形

Twitter Bootstrapをご存知でしょうか?

Twitter Bootstrapとは、手軽に洗練されたWebアプリっぽいデザインを作ることができるHTML&CSSのフロントエンドフレームワークです。ライセンスがApache License 2.0で公開されているところも使い易くてすばらしいと思います。

Twitter Bootstrapを使うとどういうデザインが作れるかは、以下のサンプルをご覧ください。

http://twitter.github.com/bootstrap/examples/hero.html
http://twitter.github.com/bootstrap/examples/hero.html

今回から何回かに分けて、Twitter Bootstrapの使い方をまとめてみようと思います。初回である今回はファイルのダウンロードと使い方の簡単な解説をします。

まず、Bootstrapのプロジェクトサイト(http://twitter.github.com/bootstrap/)からbootstrap.zipをダウンロードします。

http://twitter.github.com/bootstrap/
http://twitter.github.com/bootstrap/

ダウンロードできたら、zipファイルを展開し、適当なスペースにアップロードします。

bootstrap.zip
bootstrap.zip

これで準備完了です。

確認の意味もかねてBootstrapの雛形を作ってみます。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrapの雛形</title>
  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
</head>
<body>
  <h1>Bootstrapの雛形</h1>
  <!-- ここに必要なコードを追加します。 -->
  <script src="jquery-1.9.0.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>
</html>

Bootstrapの雛形を使ったサンプルサイト

http://code.rlated.net/bootstrap/bootstrap01.html
http://code.rlated.net/bootstrap/bootstrap01.html

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です