Bootstrapとは

Twitter Bootstrapとは




Twitter Bootstrapを導入

  • 解凍したファイルを管理フォルダーに入れる
新規ドキュメント作成
  • 「index.html」を作成する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Twitter Bootstrap の導入</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

grid system

  • 12個のコラムで、幅940pxの container を構成する


レイアウトの記述
  • 「class="row"」で「行」を、「class="span4"」でカラム数を指定します
<div class="container">
  <div class="row">
  <div class="span4" id="sidebar">サイドバー</div>
  <div class="span8" id="main">メイン</div> 
  </div>
</div>
  • わかりやすく背景色を指定します
<div class="container">
  <div class="row">
  <div class="span4" id="sidebar" style="background-color: #BBD8E9;">サイドバー</div>
  <div class="span8" id="main" style="background-color: #DCEAF4;">メイン</div> 
  </div>
</div>
  • 「header」「footer」を追加します
<div class="container">
<div id="header">
  header
</div>
  <div class="row">
  <div class="span4" id="sidebar" style="background-color: #BBD8E9;">サイドバー</div>
  <div class="span8" id="main" style="background-color: #DCEAF4;">メイン</div> 
  </div>
<div id="footer">
  footer
</div>
</div>
可変の設定
  • 「-fluid」を可変エリアのセレクタ名に追加する
<div class="container-fluid">
<div id="header">
  header
</div>
  <div class="row-fluid">
  <div class="span4" id="sidebar" style="background-color: #BBD8E9;">サイドバー</div>
  <div class="span8" id="main" style="background-color: #DCEAF4;">
    <div class="row-fluid">
      <div class="span2">サブ</div>
      <div class="span6">メイン</div>
    </div>
  </div> 
  </div>
<div id="footer">
  footer
</div>
</div>
responsive


<div class="container">
<div id="header">
  header
</div>
  <div class="row">
  <div class="span4" id="sidebar" style="background-color: #BBD8E9;">サイドバー</div>
  <div class="span8" id="main" style="background-color: #DCEAF4;">
    <div class="row">
      <div class="span2">サブコンテンツ</div>
      <div class="span6">メインコンテンツ</div>
    </div>
  </div> 
  </div>
<div id="footer">
  footer
</div>
</div>