HTML5+CSS3【マルチデバイス】―Twitter Bootstrap０２
grid system
- 12個のコラムで、幅940pxの container を構成する
レイアウトの記述
- 「class="row"」で「行」を、「class="span4"」でカラム数を指定する
ソースコード【 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> <div class="container"> <div id="header"> header </div> <div class="container"> <div class="row"> <div class="span4" id="sidebar">サイドバー</div> <div class="span8" id="main">メイン</div> </div> </div> <div id="footer"> footer </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
ブラウザで表示【 Chrome 】
[
- わかりやすく背景色を指定する
ソースコード【 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> <div class="container"> <div id="header"> header </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> <div id="footer"> footer </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
ブラウザで表示【 Chrome 】
- 「header」「footer」を追加する
ソースコード【 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> <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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="js/bootstrap.js"></script> </body> </html>
ブラウザで表示【 Chrome 】
