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の数字は、１２分割した時の何個分の幅を使うかです。

ベース系は、

muted
navbar、navbar-inner、nav、active

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

コンポーネント系は、

hero-unit

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

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

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

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

関連記事

2013-04-06 CSS Comment:0 Trackback:0

このページのトップへ

トラックバック

この記事にトラックバックする(FC2ブログユーザー)

このページのトップへ

コメントの投稿

このページのトップへ

« 若いチンポをくわえ込み不倫SEXに没頭する欲求不満妻ホーム何でも言う事を聞くロリコンお人形プレイ！お人形なのでもちろん中出しｗ »