*

助けて!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="http://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="http://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


 
 

関連記事

気になる情報・新製品発見メモ

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど内容がわからないものなどをメモ

記事を読む

Brushless Gimbal 起動!でも寒くて撮影テストはまだ

無事にひと通りの設定が完了しました。貴重なデータを提供してくれている先人の方々に心から感謝申し上げま

記事を読む

no image

CodeIgniter これもよさそうな雰囲気

CakePHP の情報を探し回っていると「CodeIgniter」というフレームワークがあることを発

記事を読む

DaVinci Resolve 12.5.5でプロキシ編集してみた

前回の記事「Dell Inspiron 17 5000 (5767) を SSDにしてみた」で書いた

記事を読む

身体検査「1万円のフォローフォーカス」は中華以下のクオリティ

色々届いたけど忙しくて触る時間がありません。取り急ぎフォローフォーカスから身体測定してみした。思った

記事を読む

no image

某インジのシグナルをEA化して改造してみる(4)

前回までの内容でバックテストしてみました。今回は改善を検討してみます。 PF0.82はともか

記事を読む

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

Message

メールアドレスが公開されることはありません。

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

気になる情報・新製品発見メモ

日頃ネットをウロウロしていて記事にするほどでもない情報、記事にするほど

SONY α6300 ピクチャープロファイルの比較検討(最終)

欲しかった Kontakt 5 - Native Instrument

可変NDフィルターの色かぶりを調整する【追試あり】

しかしセキが止まりませんな。既に二ヶ月近くゴホゴホ。鼻水ずるずる。熱は

SONY α6300 ピクチャープロファイルの比較検討(動画編)

前回の「SONY α6300 ピクチャープロファイルの比較検討」に引き

SONY α6300 ピクチャープロファイルの比較検討

最近はa6300を使う機会が増えています。そうなると6500が気になり

【妄想】片手持ちハンドヘルド 3軸ジンバルスタビライザーの比較

未だに風邪が抜けません。もう一ヶ月以上...どうやら今年の風邪は長引く

→もっと見る




  •  

PAGE TOP ↑