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 {

1. position: relative;
2. z-index: 1000;
3. min-height: 50px;
4. margin-bottom
   : 20px;
5. border: 1px solid transparent;

} .navbar-default {

1. background-color: #f8f8f8;
2. border-color: #e7e7e7;

} 修改了原本的導航條樣式，替換了背景色，邊框，最小高度，內外邊距。
其中ace增加了自己的navbar-brand樣式 .navbar .navbar-brand {

1. color: #fff;
2. font-size: 24px;
3. text-shadow: none;
4. padding-top: 10px;
5. padding-bottom: 10px;

}
原： .navbar-brand

 {

1. float: left;//有一個左浮動
2. padding: 15px 12px;
3. font-size: 18px;
4. line-height: 20px;

} 樣式ace-nav為ace特有的ul導航樣式
.ace-nav {

1. height: 100%;
2. margin: 0!important;

} .ace-nav>li:first-child {

1. border-left: none;

} ace-nav>li {

1. line-height: 45px;
2. height: 45px;
3. border-left: 1px solid #DDD;
4. padding
   : 0;
5. position: relative;
6. float: left!important;

} 原： .nav {

1. padding-left: 0;
2. margin-bottom: 0;
3. list-style: none;

} .nav>li {

1. position: relative;
2. display: block;

} 其中dropdown-caret為彈出選單對應的尖角,dropdown-navbar更改了選單彈出視窗的樣式 dropdown-navbar {

1. padding: 0;
2. width: 240px;
3. -webkit-box-shadow: 0 2px 4px rgba(30,30,100,0.25);
4. box-shadow: 0 2px 4px rgba(30,30,100,0.25);
5. 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> 
     <!-- /.brand --> 
    </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>