Bootstrapを使ってみる【編集途中】

Bootstrap Modern Architecture Team

Bootstrapとは

  • twitterが開発したCSSフレームワーク
  • HTMLのタグを編集するだけで、レイアウトが設定可能
  • レスポンシブデザインにも対応

Bootstrapを利用する為には

ファイルをダウンロードする方法もありますが、CDNを利用するのが簡単です。
headタグの中に以下のコードを追加すれば、OKです。
BootstrapはjQueryを利用するので、jQueryのライブラリも読み込む必要があります。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!--スマートフォン用に最適化-->
<meta name="viewport" content="width=device-width, initial-scale=1">

参考リンク

www.wivern.com

公式サイト
getbootstrap.com

rowとcontainer

bootstrapはグリッドシステムというレイアウト形式を採用していますが、その基本となるのが、container,row,colです。

containerは、containerとcontainer-fluidの二種類がありますが、慣れないうちはcontainerを使っておけばOKです。
詳細は以下のサイトを参照してください。

wordpresscollege.org

また、container,row,colの関係がよく分からん、という人は、以下のサイトを御覧ください。

Twitter Bootstrapのcontainer、row、col(span)の正しい使い方 -- ぺけみさお