1.布局

HTML頁面中導航欄的默認布局是：

1 toggle buttons: come before brand text container(.navbar-header) or inside it.
切換按鈕：出現在品牌文本容器（導航頭）之前或內部
2 .navbar-header: brand text container.
導航頭：品牌文本容器
3 .navbar-menu: optional element which contains a menu or form.
導航菜單：包含菜單或表單的可選元素。
4 .navbar-buttons.navbar-header: contains user info buttons and dropdowns.

導航按鈕.導航頭：包含用戶信息按鈕和下拉菜單

<div id="navbar" class="navbar navbar-default"> <!-- navbar-container --><div id="navbar-container" class="navbar-container"><!-- toggle buttons are here or inside brand container --><!-- navbar-header --><div class="navbar-header pull-left"><!-- brand text here --></div><!-- navbar-menu --><nav class="navbar-menu pull-left"><!-- optional menu & form inside navbar --></nav><!-- navbar-buttons --><div class="navbar-buttons navbar-header pull-right "><ul class="nav ace-nav"><!-- user buttons such as messages, notifications and user menu --></ul></div></div> </div><!-- /.navbar -->

放大一點可以看清導航布局，數字對應上面 的介紹

2.響應式導航欄

有兩種類型的響應式導航欄：

1、Default style in which buttons move down when screen is small and below 480px.? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ?當屏幕較小且低于480像素時，按鈕向下移動的默認樣式。?

? ? You can change this value by modifying @screen-topbar-down variable at assets/css/less/variables.less and re-compile ace.less.

2、Bootstrap折疊樣式，它隱藏用戶按鈕和下拉菜單，當屏幕低于992px時，切換按鈕用于隱藏/顯示它們。?
Bootstrap collapse style in which user buttons & dropdowns are hidden?

and when screen is below 992px, toggle buttons are used to hide/show them.?

? ??To enable this mobile style:
Add necessary toggle buttons
Add .navbar-collapse class to .navbar element
Add .navbar-collapse and .collapse class to .navbar-buttons element

If there are is a navbar menu or form, you should add .navbar-collapse and .collapse class to .navbar-menu element

需要開啟次移動樣式，代碼如下

<!--2 Add .navbar-collapse class to .navbar element --> <div id="navbar" class="navbar navbar-default navbar-collapse"><div id="navbar-container" class="navbar-container"><div class="navbar-header pull-left"><!-- brand text here --></div><!-- /.navbar-header --><!-- 3 Add .navbar-collapse and .collapse class to .navbar-buttons element --><div class="navbar-buttons navbar-header pull-rightnavbar-collapse collapse"><ul class="nav ace-nav"><!--1 user buttons such as messages, notifications and user menu --></ul></div><!-- /.navbar-buttons --><!-- 4 If there are is a navbar menu or form, you should add .navbar-collapse and .collapse class to .navbar-menu element --><nav class="navbar-menu pull-leftnavbar-collapse collapse"><!-- optional menu & form inside navbar --></nav><!-- /.navbar-menu --></div><!-- /.navbar-container --> </div><!-- /.navbar -->

3.品牌brand

Brand text is inside .navbar-header container and has the following markup:

品牌文字位于.navbar-header容器內部，并具有以下標記：

<div class="navbar-header pull-left"><a href="#" class="navbar-brand"><small><i class="ace-icon fa fa-leaf"></i>Brand Text</small></a></div>

用戶按鈕/下拉菜單

User buttons & dropdowns are inside .navbar-buttons element, inside a ul.ace-nav list:

用戶按鈕和下拉列表位于.navbar-buttons元素內部，ul.ace-nav列表中：

<div class="navbar-buttons navbar-header pull-right"><ul class="nav ace-nav"><li class="light-blue"> 用戶下拉按鈕<a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="ace-icon fa fa-tasks"></i><span class="badge">5</span></a><ul class="dropdown-menu dropdown-navbar dropdown-menu-right dropdown-caret dropdown-close">下拉菜單<li class="dropdown-header">title text</li><li>item#1.</li><li>item#2.</li><li class="dropdown-footer">bottom text or link</li></ul></li><li>Another button and dropdown</li></ul></div>

2.按鈕和菜單顏色

用戶下拉按鈕有一些顏色和選項：?

默認深藍色

grey

purple

green

light-blue

light-blue2

red

light-green

light-purple

light-orange

light-pink

dark

white-opaque

dark-opaque

transparent

light-10

dark-10

margin-1

margin-2

margin-3

margin-4

no-border

<li class="light-pink no-border margin-1"><!-- dropdown content goes here --></li> 下拉菜單有一些不同的顏色：?

默認的藍色

navbar-pink

navbar-grey

navbar-green

<li class="purple"><a href="#">...</a><ul class="dropdown-navbar navbar-pink dropdown-menu dropdown-menu-right dropdown-caret dropdown-close">下拉菜單...</ul></li>

3 dropdown-content＆ScrollBars

您可以將下拉的主要內容放入.dropdown-content元素中。?

這樣你可以在內容上使用滾動條：

<li class="purple"><ul class="dropdown-navbar dropdown-menu dropdown-menu-right"><li class="dropdown-header"></li><li class="dropdown-content"><ul class="dropdown-menu dropdown-navbar"><!-- content and list of items are here --></ul></li><li class="dropdown-footer"></li></ul> Inside? assets/js/ace/ace.js ?is the code to automatically apply scrollbars on? .dropdown-content ?element.?

Default content height is?200px. You can change this using?data-size?attribute:

<li class="dropdown-content" data-size="250"></li>

4.標簽下拉菜單

您可以在下拉菜單中使用選項卡元素。?

作為一個例子，你可以看到頂級菜單頁面：

Inside each?.tab-pane?you should use a?.dropdown-menu:

<ul class="nav ace-nav"><li class="light-blue"><a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="ace-icon fa fa-bell icon-animated-bell"></i></a><!-- it should be a "DIV.dropdown-menu" here not a "UL.dropdown-menu" --><div class="dropdown-navbar dropdown-menu dropdown-menu-right dropdown-caret dropdown-close"><div class="tabbable"><!-- tab buttons here --><ul class="nav nav-tabs"><li class="active"><a data-toggle="tab" href="#navbar-tasks">Tasks<span class="badge badge-danger">4</span></a></li><li><a data-toggle="tab" href="#navbar-messages">Messages<span class="badge badge-danger">5</span></a></li></ul><!-- .nav-tabs --><!-- tab content here --><div class="tab-content"><div id="navbar-tasks" class="tab-pane in active"><!-- first tab pane and the .dropdown-menu inside it --><ul class="dropdown-navbar dropdown-menu dropdown-menu-right"><li>item # 1</li><li>item # 2</li><li class="dropdown-footer">...</li></ul></div><!-- /.tab-pane --><div id="navbar-messages" class="tab-pane"><!-- second tab pane and the .dropdown-menu inside it --><ul class="dropdown-navbar dropdown-menu dropdown-menu-right"><!-- .dropdown-content --><li class="dropdown-content"><ul class="dropdown-menu dropdown-navbar"><li>item # 1</li><li>item # 2</li></ul></li><!-- /.dropdown-content --><li class="dropdown-footer">...</li></ul></div><!-- /.tab-pane --></div><!-- /.tab-content --></div><!-- /.tabbable --></div><!-- /DIV.dropdown-menu --></li> </ul><!-- /.ace-nav -->

用戶菜單

User menu has the following markup and is inside?ul.ace-nav?

<ul class="ace ace-nav">...<li class="light-blue"><a data-toggle="dropdown" href="#" class="dropdown-toggle"><img class="nav-user-photo" src="path/to/avatar.jpg" alt="Jason's Photo" /><span class="user-info"><small>Welcome,</small> Jason</span><i class="ace-icon fa fa-caret-down"></i></a><ul class="user-menu dropdown-menu dropdown-menu-right dropdown-yellow dropdown-caret dropdown-close"><li><a href="#"><i class="ace-icon fa fa-cog"></i> Settings</a></li><li class="divider"></li><li><a href="#"><i class="ace-icon fa fa-power-off"></i> Logout</a></li></ul></li></ul>

You can also add?.user-min?class to it, so it becomes more compact:

<li class="light-blue user-min">...</li>

切換按鈕 Toggle buttons

1.導航欄切換按鈕

Toggle buttons are used when navbar or sidebar have collapsible mobile style.?
當導航欄或邊欄具有可折疊的移動樣式時，使用切換按鈕。?
You should put the code either inside .navbar-header which contains brand text or before it:

<!-- collapse style toggle buttons can be here --><div class="navbar-header pull-left"><a class="navbar-brand" href="#"><!-- brand text is here --></a><!-- collapse style toggle buttons can be here --></div>

The following is a button which toggles.navbar-buttons,.navbar-menu.?

Using data-toggle and data-target attributes, you can choose to toggle any element, for example toggle only .navbar-buttons or both .navbar-buttons,.navbar-menu

<buttonclass="pull-right navbar-toggle navbar-toggle-img collapsed" type="button"data-toggle="collapse" data-target=".navbar-buttons,.navbar-menu"><span class="sr-only">Toggle user menu切換用戶菜單</span><img src="path/to/avatar/user.jpg" alt="Jason's Photo" /></button>

在按鈕內部，您還可以使用圖標而不是頭像：

<button class="pull-right navbar-toggle collapsed" type="button"data-toggle="collapse" data-target=".navbar-buttons"><span class="sr-only">Toggle user menu</span><i class="ace-icon fa fa-user fa-2x white"></i></button>

2.邊欄切換按鈕

• 在默認響應式（移動）樣式和可折疊響應式樣式中，切換按鈕用于顯示和隱藏側邊欄。
• 按鈕可以在品牌文本容器（.navbar-header）或其內部：

<button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler"><span class="sr-only">Toggle sidebar</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><div class="navbar-header pull-left"><!-- toggle button can also be here --><!-- brand text --><!-- toggle button can also be here --></div> In 2nd mobile menu style, you should add an invisible? .menu-toggler ?element right before? .sidebar
<a class="invisible menu-toggler" id="menu-toggler"></a><div class="sidebar responsive-min">...</div>

For collapse style sidebar in mobile view (3rd style), you should use?data-toggle?and?data-target?attributes:

<button class="pull-right navbar-toggle collapsed" type="button"data-toggle="collapse" data-target=".sidebar"><span class="sr-only">Toggle sidebar</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button> <!-- collapse style toggle buttons can be here --><div class="navbar-header pull-left"><a class="navbar-brand" href="#"><!-- brand text is here --></a><!-- collapse style toggle buttons can be here --></div>

導航菜單和窗體

1.導航菜單

您可以在頂部菜單示例頁面的導航欄內有一個菜單。

• Inside?.navbar-menu?container, you should have?ul.nav.navbar-nav?element:

<nav role="navigation" class="navbar-menu pull-left collapse navbar-collapse"><ul class="nav navbar-nav"><li><a href="#" class="dropdown-toggle" data-toggle="dropdown">item # 1</a><ul class="dropdown-menu dropdown-light-blue dropdown-caret"><!-- optional submenu items --></ul></li><li><a href="#">item # 2</a></li></ul><!-- you can also have a form here --></nav>

2.導航表單

Navbar form is similar to navbar menu.?

Inside?.navbar-menu?container, the form should have?.navbar-form?class:?

<nav role="navigation" class="navbar-menu pull-left collapse navbar-collapse"><!-- you can also have a menu here --><form class="navbar-form navbar-left form-search" role="search"><div class="form-group"><input type="text" placeholder="search" /></div><button type="button" class="btn btn-xs btn-info2"><i class="ace-icon fa fa-search icon-only bigger-110"></i></button></form></nav>

總結

以上是生活随笔為你收集整理的Ace Admin前端框架笔记二导航栏Navba的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。