*

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


 
 

関連記事

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

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

記事を読む

FOTGA リモートコントロールをSONY α6300でレンズを変えて試す

Phantom 4 pro でも買ってやろうかと思ったら微妙な ADVANCED なんてのが発売され

記事を読む

edelkrone みたいな激安中華スライダーの種類を確認

真剣に購入を検討しようと見まわると、どうも色々な種類があるようで、一度整理してみようと思ったエントリ

記事を読む

SMALLRIG 15mm ロッドクランプ 1266とSUNWAYFOTO DLC-50

年末のリグ祭り? というほど大物はありません。ここらで少しづつ小出しして行こうと思います。寒いから撮

記事を読む

テスト撮影!Pilotfly H1+ と LX100の4K動画で問題色々

敵の悪い日曜日。皆様いかがお過ごしだったでしょうか? 私は昼間っから JKと遊園地デートでディナー。

記事を読む

2週間ほど設定で悩み続けた私のBGは安定しそうもない感じ

思い起こせば7月の10日ころ、新しいバージョンのファームにしてから水平の不安定さと戦い続けました。そ

記事を読む

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

Message

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

CAPTCHA


Optionally add an image (JPEG only)

Sponsored Link

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

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

録音ミニスタジオ完成の図と12色のリモコンLED電球

構想10年・制作3日の自宅音声収録スタジオの完成です。 ご覧の通

録音(撮影)ミニスタジオの制作DIY

そんな訳で吸音スポンジを壁に取り付けてみた続きです。 調子に乗っ

YAMAHA MG10UXミキサー到着

2018年 物置(事務所or作業場or遊び部屋)の一角を音声収録&撮影

そしてzbrush coreをインストールしてみる話

Blenderに挫折してから一気に3Dにのめり込んでいます。 ま

録音環境を改善する!吸音パネルをDIYとか

久々に更新! すっかり更新グセが抜けてしまい、イマイチやる気が出

→もっと見る




  •  

PAGE TOP ↑