*

助けて!Bootstrapが楽しくて仕事が進まない(導入編)

公開日: : 最終更新日:2013/08/15 WEBDESIGN

スクリーンショット 2012-11-07 18.15.43
まずはBootstrapを導入して軽くテストしてみます。バージョンは2.2.1でダウンロードは次のURLから。
http://twitter.github.com/bootstrap/


解凍すると css img jsの3つのフォルダが出てきます。

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
├── js/
│   ├── bootstrap.js
│   ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png

HTMLソースは最低限のHTML5とします。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>無題ドキュメント
</head>
<body>
</body>
</html>

index.htmlとして以下のフォルダ構成で保存します。
スクリーンショット 2012-11-07 18.25.04
準備ができたので index.html を編集します。

<link href="libs/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="libs/js/bootstrap.min.js">
</head>

最初は全体のレイアウトを試すよ

最初はフィックス(固定レイアウト)。サンプルにしたがい配置してみます。

<div class="container">
TEST
</div>

表示しても普通にTESTと表示されるだけです。どうやら固定幅は940pxでセンタリング。本文は左よりとなっているみたいです。続いて「Fluid layout」もテストしてみましょう。

<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
SIDEBAR
</div>
<div class="span10">
BODY
</div>
</div>
</div>

ソースをみると、それぞれの幅を指定している部分は「span2」と「span10」だとわかります。合計12のspanがあり、個々の数値を調整することで比率を買えることが出来るわけですね。バックに色がついていないと、表示させた時にわかりにくいので、オリジナルのCSSファイルを追加してみます。

<link href="libs/css/mystyle.css" rel="stylesheet">

オリジナルの mystyle.css はこんな感じで書いてみます。

.span5 {
background-color: #CCC;
}
.span6 {
background-color: #CCC;
}
.span7 {
background-color: #FFC;
}

スクリーンショット 2012-11-07 19.27.46
無事に表示されました。試しにソースの「span2」を変えて実験してみましょう。5と7など、合計が12になるようにするのがここでのポイントです。ついでに3と4と5なども実験したらうまく行きました。
ここでブラウザの枠を狭くしてみたところ、グリっとレイアウトが変わらずレスポンシブじゃないことに気が付きました。本家の英文を解読してみると「Enabling responsive features」とあります。標準ではレスポンシブになっていないようです。

レスポンシブじゃなきゃ愛せない

レスポンシブにするには次のコードを書き加える必要があるようです。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="libs/css/bootstrap-responsive.css" rel="stylesheet">

ソースのhead部に書き足して実験してみます。注意点として、タグ部はの下に、bootstrap-responsiveはbpptstrap.cssの次に書きます。順番が違うとうまく動かないようです。</p> <pre><title>無題ドキュメント <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="libs/css/bootstrap.min.css" rel="stylesheet"> <link href="libs/css/bootstrap-responsive.css" rel="stylesheet"> <link href="libs/css/mystyle.css" rel="stylesheet"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="libs/js/bootstrap.min.js"></script>

これで問題なく動くようになりました。
スクリーンショット 2012-11-07 19.43.59
次回はもう少し枠の話を続ける予定です。


Sponsored Link


 
 

関連記事

filmconvert を簡単にテスト&大好きな動画

家に戻ったら日本が負けてる....グヌヌ...と唸りながらご飯も食べずに応援。やっと追いついたと思っ

記事を読む

【読書】ビデオの撮り方・楽しみ方

今年は年末モード全開。大雪のなか忘年会続きです。家に戻っても寒くて何もする気になりません。しかたない

記事を読む

no image

ぜひ投票してください

【重要】CodeIgniter のライセンスがOSLに変更されることに関する投票 http://co

記事を読む

新しい動画編集用PCの購入パーツ色々とHDDスピードテスト

色々アドバイスをいただき、よくわからないまま選んだのが GIGABYTE ビデオカード NVIDIA

記事を読む

SONY α6300 vs Panasonic GH4 対決第一弾!画質と画角とローリングシャッター現象(追試)

さて、しばらくは α6300と GH4の比較という内容が多くなると思います。でも、途中で小物いれたり

記事を読む

ご質問は掲示板へお願いいたします。

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKにジンバルを入れる

やっぱり高いけどEndurance (エンデュランス) カメラバッグの

エレコム GRAPH GEAR NEO カメラバッグDGB-P01BKが北の国から

一年中GWの美少女です。 Lowepro カメラリュック フリッ

MOZA Mini-S スマホ用スタビライザーが届いた!

1万円弱で買えるスマホ用ブラシレスジンバルの新型 MOZA Mini-

GoPro Hero7 Black用 保護ケース アルミ合金保護フレームがいいよって話

別に大した話ではありません。 最近書くことが少ないのでたまには書

期待の新製品 MOZA Mini-S スマホ用スタビライザーが発売されたみたい

教えてもらった新製品のホームページで MOZA Mini-Sが紹介され

→もっと見る




  •  

PAGE TOP ↑