More Related Content
芸術情報演習デザイン(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ 芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap 情報編集(Web) 第8回: CSSフレームワークを使う Twitter Bootstrap WordPressでウェブサービスを作ろう！ #wbNagoya ユニキャストワークショップ2013 はじめてのWebプログラミング#1 ～WordPressからはじめよう～ Viewers also liked (9)
オリエンテーション・Web概論 - 芸大Web演習 芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う CSSフレームワークを使った 簡単なレスポンシブデザインの作成 芸術情報演習デザイン(Web) 第７回：CSSレイアウト 「クリエイティブ・ミュージック・コーディング」- オーディオ・ビジュアル作品のための、オープンソースなソフトウエア・フレームワークの現状と展望 Similar to 情報編集(Web) 第9回: CSSフレームワークを使う - 2 Twitter Bootstrapのカスタマイズ (20)
続・Twitter bootstrap入門 #html5j メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩 WordPressをこれから始める人のためのテーマ講座 Bootstrapを使って効率よくWordPressオリジナルテーマを作る Dreamweaver最新ワークフロー！PSDカンプからBootstrapページを世界最速コーディング Webapp startup example_to_dolist 情報編集(Web) HTML5とは何か? HTML5、はじめの一歩 Frontend framework and Template More from Atsushi Tadokoro (20)
Interactive Music II ProcessingとSuperColliderの連携 -2 coma Creators session vol.2 Interactive Music II ProcessingとSuperColliderの連携1 Interactive Music II Processingによるアニメーション Interactive Music II Processing基本 Interactive Music II SuperCollider応用 2 - SuperColliderとPure Dataの連携 Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス Interactive Music II SuperCollider応用 - SuperColliderと OSC (Open Sound Control) iTamabi 13 ARTSAT API 実践 5 - 衛星の軌道を描く メディア芸術基礎 II 第11回：HTML5実践 表現のための様々なJavaScriptライブラリ Interactive Music II SuperCollider応用 JITLib - ライブコーディング 2 iTamabi 13 第9回：ARTSAT API 実践 3 ジオコーディングで衛星の位置を取得 Webデザイン 第10回：HTML5実践 Three.jsで3Dプログラミング Interactive Music II SuperCollider応用 JITLib - ライブコーディング 1 iTamabi 13 第8回：ARTSAT API 実践 2 衛星アプリを企画する Media Art II openFrameworks 複数のシーンの管理・切替え Interactive Music II SuperCollider実習 オリジナルの楽器を作ろう! 情報編集(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>内に下記のコードを入れるだけ
‣ 先程の段組サンプルに入れてみる
