![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
&tag(TwitterBootstrap); *目次 [#yc7d593f] #contents *関連ページ [#q7b16882] -[[Bootstrap3]] *参考情報 [#v931ea14] -[[Bootstrap, from Twitter:http://twitter.github.com/bootstrap/]]…公式サイト -[[Built With Bootstrap:http://builtwithbootstrap.com/]]…Bootstrapで作られたサイト集。 -[[Bootswatch: Themed swatches for Twitter Bootstrap:http://bootswatch.com/]] -[[Twitter Bootstrapが大幅バージョンアップ！して凄まじいことに・・・ |IDEA*IDEA:http://www.ideaxidea.com/archives/2012/02/twitter_bootstrap_v2.html]] -[[Twitter謹製のCSSフレームワーク『Bootstrap』が大幅バージョンアップ中！ | IDEA*IDEA:http://www.ideaxidea.com/archives/2011/09/bootstrap_being_upgraded.html]] -[[twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。 - ppworks blog:http://ppworks.hatenablog.jp/entry/2012/02/19/033644]] -[[これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 大人になったら肺呼吸:http://d.hatena.ne.jp/replication/20120226/1330224012]] -[[ツイッター・ブートストラップ使用例:http://guide.withabout.net/guide/gp332/393078/bootstrap-sample.html]] -[[Twitter Bootstrapの使い方:http://greenapple-room.com/conc/user/TwitterBootstrap/bootstrap.html]]…フォームの使い方とかわかりやすい。 -[[Gallery of free HTML snippets for Twitter Bootstrap. | Bootsnipp.com:http://bootsnipp.com/]] -[[TwitterBootstrapWithRails]] *導入方法 [#ja7f67b5] -[[Twitter Bootstrapの導入への3ステップ:http://blog.greative.jp/archives/94]] -cssを使う方法、lessを使ってjsで展開する方法、コマンドラインでコンパイルする方法があるらしい。 **コンパイル済みcssを組み込む [#p752e16a] -公式サイトからbootstrap.zipをダウンロード。 -bootstrapフォルダをindex.htmlファイルと同じ場所にコピー。index.htmlを以下の内容で記述。 #pre{{ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <div class="hero-unit"> <h1>Hello, world!</h1> <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> <p><a href="#" class="btn btn-primary btn-large">Learn more »</a></p> </div> </body> </body> </html> }} **ソースからコンパイルしてみる [#s1b5223c] -先に[[npm]]のインストールが必要。 -ソースの展開 git clone https://github.com/twitter/bootstrap -ディレクトリに移動し、 npm install make **使用方法 [#ce7d3a02] -headタグ内に以下のようにしこむ。bootstrap-responsiveはレスポンシブデザインにするかどうかで決める。 #pre{{ <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> <script src="http://code.jquery.com/jquery.js" type="text/javascript"></script> <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script> }} *グリッドの使い方など [#b1542733] **参考情報 [#d95f3012] -[[Twitter Bootstrapのグリッド機能で段組を作成 [ホームページ作成] All About:http://allabout.co.jp/gm/gc/394128/]] **containerとrowの役割ってなに? [#bd148078] -[[Twitter Bootstrap – How to Style Rows – Phatness.com:http://phatness.com/2012/02/twitter-bootstrap-how-to-style-rows/]]、[[Twitter Bootstrap – How to Style Rows – Phatness.com:http://phatness.com/2012/02/twitter-bootstrap-how-to-style-rows/]]を見て理解。 -containerは940px。rowは960pxで-20px、spanは20pxのマージンが設定されている。つまり、containerの中に、rowを入れ、さらにspan4(など)を格納することで、span4の最初のマージンをキャンセルして、containerの左端とぴったり一致させることができる。 -つまり、span4などを直接いれてレイアウトしない場合、rowは不要ということになる。 -[[Bootstrap, from Twitter:http://twitter.github.io/bootstrap/examples/hero.html]]をみても、hello-unitはcontainerの直下に入っていて、rowの中にはない。 **ネストするとき [#r0370696] -rowのときは、コンテナの列数に合うようにする。row-fluidのときは常に合計12にするってことなのか。 *フォーム [#l9dabf3e] **参考情報 [#j9fb22db] -[[Base · Bootstrap:http://twitter.github.io/bootstrap/base-css.html]] -[[Bootstrap：Base CSS:http://greenapple-room.com/conc/user/TwitterBootstrap/bootstrap_03.html#03-07]]
