More Related Content
Similar to 芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
Similar to 芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap (20)
More from Atsushi Tadokoro
More from Atsushi Tadokoro (20)
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap
- 14. <!DOCTYPE HTML>
<html>
! <head>
! ! <link rel="stylesheet" href="css/bootstrap.css" />
! ! <meta charset="utf-8" />
! ! <title>Bootstrapのテスト</title>
! </head>
! <body>
! </body>
</html>
Twitter Bootstrapを使ってみる
‣ では早速、Bootstrapを入れたHTMLのベースを作成
- 15. <!DOCTYPE HTML>
<html>
! <head>
! ! <link rel="stylesheet" href="css/bootstrap.css" />
! ! <meta charset="utf-8" />
! ! <title>Bootstrapのテスト</title>
! </head>
! <body>
! ! <div class="container">
! ! </div>
! </body>
</html>
Twitter Bootstrapを使ってみる
‣ 次に、Bootstrapのコンテント全体を、
class="container"のdiv要素で囲む
- 16. <!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>
! </body>
</html>
Twitter Bootstrapを使ってみる
‣ H1で見出しをつくってみる
- 21. <!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">
! ! ! </div>
! ! </div>
! </body>
</html>
Twitter Bootstrapを使ってみる
‣ たとえば、4 + 4 + 4の3コラムを組んでみる
‣ まずコラムの先頭を<div class="row">で囲む
- 22. ...
! ! ! <div class="row">
! ! ! ! <div class="span4">
! ! ! ! </div>
! ! ! ! <div class="span4">
! ! ! ! </div>
! ! ! ! <div class="span4">
! ! ! ! </div>
! ! ! </div>
...
Twitter Bootstrapを使ってみる
‣ <div class="row">の中に
‣ 3つの<div class="span4">を入れる
- 23. ...
! ! ! <div class="row">
! ! ! ! <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">の中に、内容を記述
- 26. <!DOCTYPE HTML>
<html>
! <head>
! ! <link rel="stylesheet" href="css/bootstrap.css" />
! ! <meta charset="utf-8" />
! ! <title>Bootstrapのテスト</title>
! </head>
! <body>
! ! <div class="container">!! !
! ! ! <div class="hero-unit">
! ! ! ! <h1>Hello Twitter Bootstrap!!</h1>
! ! ! ! <p>このページは、Twitter Bootstrapを利用して作成し
たページのサンプルです。</p>
! ! ! ! <p><a class="btn btn-primary btn-large">もっと
詳しく</a></p>
! ! ! </div>
...
Twitter Bootstrapを使ってみる
‣ 冒頭のH1をよりヘッダーらしく
