Ace Admin前端框架笔记二导航栏Navba

最新推荐文章于 2025-01-12 11:51:40 发布

神奇小白

最新推荐文章于 2025-01-12 11:51:40 发布

阅读量4.4k

点赞数 1

分类专栏： ACE admin 文章标签： ace admin

本文链接：https://blog.youkuaiyun.com/uotail/article/details/80483181

版权

ACE admin 专栏收录该内容

3 篇文章

订阅专栏

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-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 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>