boostrap の適用

boostrap 適用
<link href=”css/boostrap.min.css” rel=”stylesheet”>
<link href=”css/boostrap-responsive.min.css” rel=”stylesheet”>
これで
boostrap.css を読み込んでから
boostrap-responsive.css を読み込む
あらかじめ
メディアクエリーが指定されているので
画面サイズに合わせてえスタイルが細かく制御される
メディアクエリーとは
メディア、たとえば、プリンタ、ディスプレイなど
と閲覧者の環境、つまり画面サイズに応じて
CSSの適用条件を細かく指定できるという仕組みのこと
#media (min-width: 768px) and (max-width:979px){
//画面さいず最小 768px
最大で 979px の場合に視聴するスタイルを記述
}
#media (max-width]707px){
//画面さいず最大 767px のときに使用するスタイルを記述
}
ということで
買物リストアプリの header タグに
boostrap 適用
<header class=”navbar navbar-fixed-top”>
<nav class=”navbar-inner”>
<span class=”brand”>買物長</span>
<ul class=”nav”>
<li class=”active”><a href=”index.html”>買物帳リス
ト</a></li>
</ul>
</nav>
</header>
ヘッダーをナビゲーションバーへ変更する
これは
class=”navbar”
class=”navbar-inner”
を指定することで見た目をナビゲーションバーにできる
あわせて
navbar-fixed-top とすれば
画面さいずが変更されたときでも
ナビゲーションバーを画面上部へ固定できる
class=”brand”とすると
サイトのブランド名を表示できる
ナビゲーションバーにリンクを追加したいなら
class=”nav”
とする
現在表示している画面のリンクをアクティブに見せるには
class=”active”
とすればリンクが強調表示される

コメントを残す

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