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.
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-right navbar-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-left navbar-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
<button class="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 haveul.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>