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

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

アクションとコマンド

今回はインターフェイスにおける動詞、つまりは「なんらかの行動(新規作成、表示、編集、削除)」についての解説です。 なんらかの行動に関してはほとんどのアプリケーションでボタンで実行されることが多いのでは …

no image

lessサンプル

lessのサンプル Contents1 lessファイル構成2 ソース3 注意点4 参考リンク lessファイル構成 header,footer sytle 変数 lib 関数 common head …

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …