More Related Content
Similar to 情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
Similar to 情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ (20)
More from Atsushi Tadokoro
More from Atsushi Tadokoro (20)
情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ
- 7. <!DOCTYPE HTML>
<html>
! <head>
! ! <link rel="stylesheet" href="css/bootstrap.css" />
! ! <meta charset="utf-8" />
! ! <title>Bootstrapのテスト</title>
! </head>
! <body>
! ! <div class="container">
! ! ! <h1>Twitter Bootstrapのテスト</h1>!! !
! ! ! <div class="row-fluid">
! ! ! </div>
! ! </div>
! </body>
</html>
Twitter Bootstrapを使ってみる
‣ たとえば、4 + 4 + 4の3コラムを組んでみる
‣ まずコラムの先頭を<div class="row-fluid">で囲む
- 8. ...
! ! ! <div class="row-fluid">
! ! ! ! <div class="span4">
! ! ! ! </div>
! ! ! ! <div class="span4">
! ! ! ! </div>
! ! ! ! <div class="span4">
! ! ! ! </div>
! ! ! </div>
...
Twitter Bootstrapを使ってみる
‣ <div class="row-fluid">の中に
‣ 3つの<div class="span4">を入れる
- 9. ...
! ! ! <div class="row-fluid">
! ! ! ! <div class="span4">
! ! ! ! ! <h2>Span 4</h2>
! ! ! ! ! <p> このコラムは、4つのスパン... </p>
! ! ! ! </div>
! ! ! ! <div class="span4">
! ! ! ! ! <h2>Span 4</h2>
! ! ! ! ! <p> このコラムは、4つのスパン... </p>
! ! ! ! </div>
! ! ! ! <div class="span4">
! ! ! ! ! <h2>Span 4</h2>
! ! ! ! ! <p> このコラムは、4つのスパン... </p>
! ! ! ! </div>
! ! ! </div>
...
Twitter Bootstrapを使ってみる
‣ それぞれの<div class="span4">の中に、内容を記述
- 16. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
レスポンシブなページに
‣ BootstrapでレスポンシブWebデザイン
‣ あらかじめ、レスポンシブなサイト制作を想定しているので、
とても簡単
‣ <head>...</head>内に下記のコードを入れるだけ
‣ 先程の段組サンプルに入れてみる
