Layout

  1. toggle buttons: 一些按钮，比如 屏幕变小或者是手机端，折叠菜单按钮
  2. .navbar-header: 头信息，例如
  3. .navbar-menu: 导航栏菜单
  4. .navbar-buttons.navbar-header: 包含用户信息的下拉菜单

例子：

<div id="navbar" class="navbar navbar-default">

<div id="navbar-container" class="navbar-container">

<!-- toggle buttons are here or inside brand container -->

<div class="navbar-header pull-left">

<!-- brand text here -->

</div><!-- /.navbar-header -->

<div class="navbar-buttons navbar-header pull-right ">

<ul class="nav ace-nav">

<!-- user buttons such as messages, notifications and user menu -->

</ul>

</div><!-- /.navbar-buttons -->

<nav class="navbar-menu pull-left">

<!-- optional menu & form inside navbar -->

</nav><!-- /.navbar-menu -->

</div><!-- /.navbar-container -->

</div><!-- /.navbar -->

Responsive Navbar 响应式 导航条

480px

992px

可以修改 ace.less 和 assets/css/less/variables.less 中的：

@screen-topbar-down

1、.navbar 元素 添加 .navbar-collapse 样式

2、.navbar-buttons 元素 添加 .navbar-collapse 和 .collapse

3、导航条菜单 .navbar-menu 元素添加 .navbar-collapse 和 .collapse

Navbar options

  1. 固定导航条 ，例如页面滚动时固定在顶部

在 .navbar 元素上添加 .navbar-fixed-top

  1. 导航条容器

在 .navbar-container元素上添加 .container

  1. 水平导航条

在 .navbar 元素添加 .h-navbar

Brand 网站标题 名字

<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

Overview

一个 .navbar-buttons div里面包含一个 .nav ace-nav ul列表

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

Button & menu colors 按钮和菜单颜色

默认、grey、purple、green、light-blue、light-blue2 、red、light-green、light-purple、light-orange、light-pink、white-opaque、dark-opaque

等等。。。。

<li class="light-pink no-border margin-1">

<!-- dropdown content goes here -->

</li>

<li class="grey">

</li>

这些 颜色都可以通过 js 脚本动态改变

下拉菜单按钮 颜色 ：

默认、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>

dropdown-content & Scrollbars 下拉内容和滚动条

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

下拉框高度默认是 200px，可以通过 data-size 属性修改

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

</li>

Tabbed dropdown表格下拉

在 .dropdown-menu 元素上加上 .tab-pane 样式

<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 系统显示用户信息菜单

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

Toggle buttons 切换按钮

在 .navbar-header 之前

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

Navbar Menu 导航栏菜单

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

Navbar Form

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

results matching ""

    No results matching ""