ウェブ学のすすめ

Study of Web Design & Programing

Twitter Bootstrapのサンプル盛り合わせ

CSS


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

Twitter社が作ったCSSフレームワーク「Bootstrap」をいろいろ試してみました。用意されたCSSを指定してあげれば簡単にPCサイト、スマートフォンサイトに可変で対応するレスポンシブデザインを構築することができます。

プレビュー


↓別ウィンドウを開いて見る
Twitter Bootstrapのサンプル盛り合わせ - js do it

↓QRコード

※おすすめQRコード読み取りアプリ

最速QR
カテゴリ: ユーティリティ
サイズ: 1.5 MB
価格： 無料

ポイント

↓Bootstrapにアクセスしダウンロードします。

↓HTMLファイルのhead部分に「bootstrap.min.css」と「bootstrap-responsive.min.css」を指定します。

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

コード

HTML
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>Twitter Bootstrap</title>
      <meta name="viewport" content="width=device-width">
      <link rel="stylesheet" href="http://webgaku.biz/bootstrap/css/bootstrap.min.css">
      <link rel="stylesheet" href="http://webgaku.biz/bootstrap/css/bootstrap-responsive.min.css">
      <!--[if lt IE 9]>
		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
　　　<![endif]-->
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Twitter Bootstrap</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              Logged in as <a href="#" class="navbar-link">Username</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="#">ホーム</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">目次</li>
              <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
              <li><a href="#"><i class="icon-book"></i> Library</a></li>
              <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
              <li><a href="#"><i class="icon-leaf"></i>Leaf</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        <div class="span9">
          <div class="hero-unit">
            <h1>Hello, world!</h1>
            <dl class="dl-horizontal">
                    <dt>Description lists</dt>
  					<dd>A description list is perfect for defining terms.</dd>
                    <dt>Euismod</dt>
  					<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                    <dt>Malesuada porta</dt>
  					<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
			</dl>
            <p><a role="button" class="btn btn-primary btn-large" data-toggle="btn">大きいボタン &#187;</a></p>
          </div>
          <div class="row-fluid">
            <div class="span4">
              <h2>強調文字</h2>
              	<p class="muted">muted</p>
				<p class="text-warning">text-warning</p>
				<p class="text-error">text-error</p>
				<p class="text-info">text-info</p>
				<p class="text-success">text-success</p>
              <p><a class="btn" href="#">トップへ戻る &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>引用</h2>
              <blockquote>
  　　　　　　	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
　　　　　　　</blockquote>
              <blockquote class="pull-right">
  　　　　　　	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                  <small>Someone famous <cite title="Source Title">Source Title</cite></small>
　　　　　　　</blockquote>  
              <p><a class="btn" href="#">トップへ戻る &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>定義リスト</h2>
              	<dl>
                    <dt>Description lists</dt>
  					<dd>A description list is perfect for defining terms.</dd>
                    <dt>Euismod</dt>
  					<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                    <dt>Malesuada porta</dt>
  					<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
				</dl>
              <p><a class="btn" href="#">トップへ戻る &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->
          <div class="row-fluid">
            <div class="span4">
              <h2>テーブル</h2>
              <table class="table table-bordered">
  				<thead>
    				<tr><th></th><th>A</th><th>B</th><th>C</th></tr>
  				</thead>
  				<tbody>
    				<tr class="success"><td>1</td><td>success</td><td>success</td><td>success</td></tr>
                    <tr class="error"><td>2</td><td>error</td><td>error</td><td>error</td></tr>
                    <tr class="warning"><td>3</td><td>warning</td><td>warning</td><td>warning</td></tr>
                    <tr class="info"><td>4</td><td>info</td><td>info</td><td>info</td></tr>
  				</tbody>
				</table>
              <p><a class="btn" href="#">トップへ戻る &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>フォーム</h2>
              <form>
                  <legend>Legend</legend>
                  <label>Label name</label>
                  <input type="text" placeholder="Type something…">
                  <span class="help-block">Example block-level help text here.</span>
                  <label class="checkbox">
                    <input type="checkbox"> Check me out
                  </label>
                  <button type="submit" class="btn">Submit</button>
                </form>
              <p><a class="btn" href="#">トップへ戻る &raquo;</a></p>
            </div><!--/span-->
            <div class="span4">
              <h2>ボタン</h2>
              	<p><button class="btn">btn</button></p>
                <p><button class="btn btn-primary">btn-primary</button></p>
                <p><button class="btn btn-info">btn-info</button></p>
                <p><button class="btn btn-success">btn-success</button></p>
                <p><button class="btn btn-warning">btn-warning</button></p>
                <p><button class="btn btn-danger">btn-danger</button></p>
                <p><button class="btn btn-inverse">btn-inverse</button></p>
              <p><a class="btn" href="#">トップへ戻る &raquo;</a></p>
            </div><!--/span-->
          </div><!--/row-->
        </div><!--/span-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>&copy; Company 2012</p>
      </footer>

    </div><!--/.fluid-container-->
  </body>
</html>
CSS
body {
    padding-top: 60px;
    padding-bottom: 40px;
}
.sidebar-nav {
    padding: 9px 0;
}

/* Large desktop */
@media (min-width: 1200px) {
    body {
        padding-top: 60px;
        padding-bottom: 40px;
    } 
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px)  {
    body {
        padding-top: 0;
    	padding-bottom: 0;
    }
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px)  {
    body {
        padding-top: 0;
    	padding-bottom: 0;
    }
}