助けて！Bootstrapが楽しくて仕事が進まない（導入編）
公開日：
:
最終更新日：2013/08/15
WEBDESIGN
まずはBootstrapを導入して軽くテストしてみます。バージョンは2.2.1でダウンロードは次のURLから。
http://twitter.github.com/bootstrap/
解凍すると css img jsの３つのフォルダが出てきます。
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として以下のフォルダ構成で保存します。
準備ができたので 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;
}
無事に表示されました。試しにソースの「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部に書き足して実験してみます。注意点として、タグ部は
これで問題なく動くようになりました。
次回はもう少し枠の話を続ける予定です。
Sponsored Link
関連記事
-
-
ブラシレスジンバル Alexmos v2.43b5 テスト撮影
Youtubeで、昔懐かしい曲を探して聞いたりしています。若き日の想い出が蘇ってきて、なんか不思議な
-
-
謹賀新年は デュアルSIMデュアルスタンバイ gooのg07新スマートフォン【追記】
あけましておめでとうございます。 新年一発目はスマートフォンネタ。 到着したのは goo
-
-
適応PIDゲインコントロールをオフで自動PID設定
まったくお金にならないデザインと資料作成に追われています。お世話になった人のためなので頑張るしかあり
-
-
EOS 5D2 でフラットなピクチャースタイルを試す
朝日新聞の糞っぷりが話題になっていますね。ちょっと感想を書こうかと思ったら「怒り」しか出てこないので
ご質問は掲示板へお願いいたします。