FC2ブログ

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"
とすればリンクが強調表示される
スポンサーサイト



テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック