*

助けて!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


 
 

関連記事

GH4 Optimal Film Setting – GH4が無いからGH3で真似てみる

GH4買っちゃおうかな〜 walimex cage 欲しいなぁ〜 と思ってあちこちのブログを眺めてい

記事を読む

Neat Video v4 Pro Plugin for Final Cut Proを買ってみた編

クリスマスと言えばイルミネーションの季節。街を歩く幸せそうなカップルを見て「埋めてあげようか?」など

記事を読む

Alexmos 32 bit Controller 2.41b4 のフォロースピードを上げる

ひと通り試してみて反省。先にセンサーのキャリブレーションやっとけよって^^; でも目的は、ファームの

記事を読む

no image

URLセグメントを取得する

URIクラスのsegment()っていうクラスが便利なことを今日知ったのでメモ。 $this->ur

記事を読む

Fliker – Smile. Everyone gets a free terabyte.

写真共有サイトFlikerが無料で1TBになってたのでアカウント作ってみた。日本語化してくれないのね

記事を読む

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

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 ↑