skillup

技術ブログ

UI デザイン

固定されたナビ(ヘッドとサイド)

投稿日:2016年1月11日 更新日:

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。

ヘッダーを固定したい場合

classにnav-fixed-topを入れてあげればOKです。

サイドバーを固定したい場合

div classにaffixを入れ、bootstrap.cssに下記のCSSを追加します。

参考リンク

Navbarとサイドバーに置いたNavを固定させる

bootstrapで基本的な固定サイドメニューを作成する

Bootstrap3で固定サイドバー(affix & scrollspy)を使用する

-UI, デザイン
-,

執筆者:


comment

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

関連記事

no image

レスポンシブサイト作成に関して

実務でレスポンシブを作ったので、そのまとめに関して。ちなみにPCのサイト自体も作ったことなかったのでそのまとめに関しても。 メインキャッチの処理は縦横の比率を変えない、常に要素を中央に配置するとなると …

no image

css flexboxについて どんなことができるのか?

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗) 特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘していま …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

positionを使うときに注意すること

positionを使ったときに色々なまとめ。 親>子>孫だったときに親がrelative、子、孫がabsoluteだと孫の基準点は子になる(ソース参照) position:absolute …

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …