Download to read offline
![テンプレート
<html>
<head>
<title>Your name</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="navbar-inner">
<div class="container">
<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>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</nav>
<header class="hero-unit">
<h1>Hello!! World!!!!!</h1>
</header>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>](https://image.slidesharecdn.com/twitterbootstrap-120827110033-phpapp01/75/Twitterbootstrap-7-2048.jpg)
![Bootstrap使い始めて困ったことなど [Web的な話をシェアしてみる会]](https://cdn.slidesharecdn.com/ss_thumbnails/20140228-140228020535-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Twitterbootstrapでモック開発
- 1. TwitterBootstrap で動くモック開発 2012/8/28 @ConnectStar /w スマタブ5
- 2. TwitterBootstrapって？ • CSS・UIフレームワーク • グリッドシステムでレスポンシブ対応 •Twitterが開発したオープンソース • http://twitter.github.com/ bootstrap/index.html
- 3. モダンでちょっとTwitterっぽい、スマ ホからも見れるレスポンシブなウェブが すぐに開発できるフレームワーク。 モック開発に最適！ 利用シーン 営業競争力UPに。提案に。要件定義に。 設計書代わりに。
- 4. おまけ素敵ポイント • LESSによる独自カスタマイズ拡張 • ApacheLicense, Version 2.0で商用 利用可 納品物としてもいけます
- 5. 実際に作ってみましょう • テーマ： 自己紹介ページ •必須要素：グローバルメニュー ／ KV ／ 自分紹介 • 必須技術：レスポンシブ ／ JavaScript ツール • 作業時間：30分
- 6. 準備 • 以下からパッケージをダウンロード • http://twitter.github.com/bootstrap/index.html • 解凍フォルダにindex.htmlを作成し、次ページのテンプレートを 設置 • 参考サイト • （本家）http://twitter.github.com/bootstrap/ scaffolding.html ※基本的にすべての情報はここのドキュメン トに記載されてます。 • （ちょっと古いです）http://d.hatena.ne.jp/end0tknr/ 20111016/1318729659
- 7. テンプレート <html> <head> <title>Your name</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/bootstrap-responsive.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="container"> <nav class="navbar"> <div class="navbar-inner"> <div class="container"> <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> <div class="nav-collapse"> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">Profile</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </nav> <header class="hero-unit"> <h1>Hello!! World!!!!!</h1> </header> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
- 8. 成果発表 • 10分 • 挙手制 •2∼3人選抜
- 9.