ace bootstrap后台框架-导航栏api

最新推荐文章于 2020-12-24 14:34:57 发布

xiaobingtao

最新推荐文章于 2020-12-24 14:34:57 发布

阅读量5.4k

点赞数

CC 4.0 BY-SA版权

文章标签： ace bootstrap

本文链接：https://blog.youkuaiyun.com/xiaobingtao/article/details/42837665

本文介绍了ACE后台管理系统中使用的Bootstrap导航栏的样式和结构，包括导航条的基本设置，如背景颜色、边框、字体大小和浮动等。同时展示了包含品牌标识、任务下拉菜单的示例代码，详细解析了导航栏组件的各个部分及其功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ACE导航条

.navbar {

margin-left: 0;
margin-right: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
margin: 0;
padding-left: 0;
padding-right: 0;
min-height: 45px;
position: relative;
background: #438eb9;

}

Bootstrap导航条

}

.navbar-default {

background-color: #f8f8f8;

border-color: #e7e7e7;

}

修改了原本的导航条样式，替换了背景色，边框，最小高度，内外边距。

其中ace增加了自己的navbar-brand样式

.navbar .navbar-brand {

color: #fff;

font-size: 24px;

text-shadow: none;

padding-top: 10px;

padding-bottom: 10px;

}

原：

.navbar-brand {

float: left;//有一个左浮动

padding: 15px
 12px;

font-size: 18px;

line-height: 20px;

}

样式ace-nav为ace特有的ul导航样式

height: 100%;
margin: 0!important;

}

.ace-nav>li:first-child {

border-left: none;

}
ace-nav>li {

line-height: 45px;

height: 45px;

border-left: 1px
 solid #DDD;

padding: 0;

position: relative;

float: left!important;

}

原：

padding-left: 0;
margin-bottom: 0;
list-style: none;

}

position: relative;
display: block;

}

其中dropdown-caret为弹出菜单对应的尖角,dropdown-navbar更改了菜单弹出窗口的样式

padding: 0;
width: 240px;
-webkit-box-shadow: 0 2px 4px rgba(30,30,100,0.25);
box-shadow: 0 2px 4px rgba(30,30,100,0.25);
border-color: #bcd4e5;

}

<div class="navbar navbar-default" id="navbar">
<div class="navbar-container" id="navbar-container">
<div class="navbar-header">
<a href="#" class="navbar-brand"> <small> <i class="icon-leaf"></i> ACE后台管理系统 </small> </a>

</div>
<nav class="navbar-header" role="navigation">
<ul class="nav ace-nav">
<li class="grey"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> <i class="icon-tasks"></i> <span class="badge badge-grey">4</span> </a>
<ul class="dropdown-navbar dropdown-menu dropdown-caret">
<li> <a href="#">
<div class="clearfix">
<span class="pull-left">软件更新</span>
<span class="pull-right">65%</span>
</div> </a> </li>
<li> <a href="#">
<div class="clearfix">
<span class="pull-left">硬件更新</span>
<span class="pull-right">65%</span>
</div> </a> </li>
<li><a href="#"> 查看任务详情 <i class="icon-arrow-right"></i> </a></li>
</ul> </li>
</ul>
</nav>
</div>
</div>