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

laravel Mix

Contents1 laravel Mix2 インストール laravel Mix 実務でlessを使っていて便利なのですが、コンパイルをatomのプラグインで行っていました。 ※保存されると自動的に …

no image

css中央ぞろえ

よく出る中央ぞろえテクに関して 横センタリング   [CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ 中央センタリング たった4行! CSS3 Flex …

no image

JSリンク集+git ブランチ指定 clone

現状の私の課題としてUIに対する意識が甘いということが上げられます。 大昔のサイトで使っているようなわかりにくいUIをそのまま使っているんですよね。 UIといってもいろいろな要素が必要となってきますが …

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

ドロップダウンリスト

本日はヘッダーメニューとかで見られるドロップダウンリストについて。 bootstrapを使った方法は下記に。 http://skill-up-engineering.com/?p=1157 通常のHT …