スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

bootstrapの使い方

今回は、実際にtwitter bootstrapを使ってみましょう。

シンプルなHTMLのみですのでXAMPPは立ち上げなくても大丈夫ですが、解説上、立ち上げてることを想定して説明します。テストですので、いままでmain.php等を作ってきたフォルダtestを使います。

導入
公式サイト
http://twitter.github.com/bootstrap/

ダウンロードは、TOPにあります。
記事を書いた時点のバージョンは、「Version 2.3.1」です。

ダウンロードしたzipファイル内にあるbootstrapフォルダを、そのままtestフォルダに入れます。そして、main.php等と同じ階層にsample.htmlというファイルを作りましょう。

sample.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrapのテスト</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">
<h3 class="muted">秘密の部屋プロジェクト</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li class="active"><a href="#">トップ</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">ドキュメント</a></li>
<li><a href="#">ダウンロード</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</div>
</div>
<div class="hero-unit">
<h1>ようこそマイブラザー!</h1>
<p>やぁ、よく来たね。今日の目玉商品は「はがねの妖精」だ。いつものが欲しい?あぁ、もちろん用意しているさ。ここで武器を装備して行くかい?</p>
</div>

<div class="row">
<div class="span4">
<h2>滝の中でセックス</h2>
<p>ここには説明文が入ります。こんなものに興味があるとは、君も相当の変態さんだね!フフフ、いいのさ。人類みな兄弟。一緒に未知なる性と欲望の世界に飛び込もうではないか。まず始めに服をすべて裏返しに...</p>
<p><a class="btn" href="#">詳細を見る »</a></p>
</div>
<div class="span4">
<h2>人類と宇宙とエロス</h2>
<p>ここには説明文が入ります。こんなものに興味があるとは、君も相当の変態さんだね!フフフ、いいのさ。人類みな兄弟。一緒に未知なる性と欲望の世界に飛び込もうではないか。まず始めに服をすべて裏返しに...</p>
<p><a class="btn" href="#">詳細を見る »</a></p>
</div>
<div class="span4">
<h2>性器の大発明!</h2>
<p>ここには説明文が入ります。こんなものに興味があるとは、君も相当の変態さんだね!フフフ、いいのさ。人類みな兄弟。一緒に未知なる性と欲望の世界に飛び込もうではないか。まず始めに服をすべて裏返しに...</p>
<p><a class="btn" href="#">詳細を見る »</a></p>
</div>
</div>

<hr>

<footer>
<p>© えろぺんぎん 2013</p>
</footer>

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

</body>
</html>
ブラウザで直接確認してみます。sample.htmlをダブルクリックすれば、通常はブラウザが立ち上がり、内容が表示されます。XAMPPを起動している場合は、以下のアドレスにアクセスすることで表示されます。

http://localhost/test/sample.html

表示されましたか?ボタンを押しても何もならないです。ほんと、見た目だけのものです。HTMLソースは長めですが、やっていることは簡単なので、ざっくりと説明していきます。

まず、headタグ内でbootstrap.min.cssを読み込みます。

 <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

bootstrap.cssとbootstrap.min.cssは、中身は一緒です。minのほうは圧縮されていて、ファイルサイズが小さいです。ただ、圧縮されているため、人間が見るには見難いです。中身を見て勉強するわけでもないので、minを使ってます。

これで、とりあえず表示するだけなら準備OKです。ソースの最後の方にある、

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

というのも将来的には必要なので入れてますが、見た目には関係ありません。

HTMLの各タグに、classを指定してますが、これが肝心です。bootstrapには大きく分けて、レイアウト系、ベース系、コンポーネント系のclassがあります。レイアウトというか、ブラウザを舞台として見立てたときに、どういったブロックを配置して作ろうかというものと、ベースというのは文字であったり画像、ボタン等の基本的なもの、コンポーネントは構成済みのある程度出来上がったパーツになります。

公式は英語ですが、わかりやすくサンプル付きで説明されています。

レイアウト系
http://twitter.github.com/bootstrap/scaffolding.html

ベース系
http://twitter.github.com/bootstrap/base-css.html

コンポーネント系
http://twitter.github.com/bootstrap/components.html

英語が読めなくても、どういう指定でどう見えるのかが書いてあるので、ざっくりわかると思います。

今回の例で言うと、レイアウト系は

container
row
spanX(Xは数字)

ですね。
containerは固定の枠。rowは行、span数字は列です。
spanの数字は、12分割した時の何個分の幅を使うかです。

ベース系は、

muted
navbar、navbar-inner、nav、active

です。
mutedは文字表現の一つです。mutedは直訳で弱めるって意味です。ちょっと暗くなったり、目立たない感じにしたい文字に使います。nav系は、その名の通りナビゲーションっぽいものです。activeは現在選択されているものです。最初に選択しときたいものにだけ指定しましょう。

コンポーネント系は、

hero-unit

を使いました。
メインの、どでかい説明です。

ちなみに、実用というより説明のために全体的に使ってみましたので、使いドコロは間違ってる気もします。ただ、これと全く同じデザインをHTMLとCSSで一から書こうと思ったら、かなり大変です。こういった便利なものは、どんどん使いましょう!

何故かというと、「本来の目的」を見失わないためです。もちろん使いにくかったり、使い物にならなければ別のもので代用したり、改造したり、自分で作ったりもしますが、とりあえず時間を掛けるべきは「アイデア」部分です。

大切なことは、『何が自分の股間に刺激的な毎日をもたらしてくれるのか』です。
関連記事

コメントの投稿

非公開コメント

プロフィール

エロぺんぎん

管理人:エロぺんぎん
不純な動機でプログラマーになった男、エロぺんぎんです。ブラザー達を猛烈に応援したい気持ちと、自分もプログラマーとして成長したい思いで、当ブログを立ち上げました。
エロぺん動画を運営しております。

検索フォーム
Twitter
最新記事
最新コメント
カテゴリ
リンク
RSSリンク
エロぺん動画で人気の動画
人気の記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。