Bootstrap中定制LESS-颜色及导航条

主题色

在variables.less文件的开始，可以看到灰色及品牌色的默认变量及其值

@gray-darker:   lighten(#000,13.5%);    //#222
@gray-dark

我们可以直接进行替换，以涵盖我们所需的完整灰度空间

@gray-darker:   #222;
@gray-dark:     #454545;
@gray:          #777;
@gray-light:    #aeaeae;
@gray-lighter:  #ccc
@gray-lightest: #ededed
@offwhite:      #fafafa;

将品牌颜色改为金黄色：

@brand-primary: #c1ba62;

导航条颜色变量

在variables.less中修改下列值：

@navbar-height:                    64px;
@navbar-margin-bottom:             0; // 设置元素的下外边距
...
@navbar-default-color:             @gray;
@navbar-default-bg:                #fff;
@navbar-default-border:            @gray-light; // darken(@navbar-default-bg, 9.5%);
...
// Navbar links
@navbar-default-link-color:                @navbar-default-color;
@navbar-default-link-hover-color:          @link-hover-color;//悬停时
@navbar-default-link-hover-bg:             @off-white;
@navbar-default-link-active-color:         @link-hover-color;
@navbar-default-link-active-bg:            @gray-lightest;
@navbar-default-link-disabled-color:       @gray-lighter;
@navbar-default-link-disabled-bg:          transparent;

会出现有关导航条的新特征

添加Logo

加入logo

<a class="navbar-brand" href="index.html"><img src="img/logo.png" alt="Bootstrappin'" width="120px"></a>

由于navbar-brand设定了内边距，使得Logo不在和导航条的底边对齐，通过修改navbar.less实现：

.navbar-brand {
    float: left;
    //padding: @navbar-padding-vertical @navbar-padding-horizontal;
    padding: 22px 30px 0 15px;
}

实现对齐

调整导航项内边距

实现导航项文本与Logo位于同一基线上
导航项文本代码：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav"> 
    <li class="active"><a href="index.html"><span class="icon fa fa-home"></span>Home</a></li>
    <li><a href="#"><span class="icon fa fa-desktop"></span>Portfolio</a></li>
    <li><a href="#"><span class="icon fa fa-group"></span>Team</a></li>
    <li><a href="#"><span class="icon fa fa-envelope"></span>Contact</a></li>
    </ul>
</div>

代码中navbar-collapse指折叠类
更改导航文本项less样式，找到导航项的父元素ul的选择符.navbar-nav，然后找到// Uncollapse the nav非折叠导航项，更改代码如下

// Uncollapse the nav
@media (min-width: @grid-float-breakpoint) {
float: left;
margin: 0;

> li {
  float: left;
  > a {
    //padding-top:    @navbar-padding-vertical;
    //padding-bottom: @navbar-padding-vertical;
    padding: 30px 30px 14px;
    font-size: 18px;
  }
}

解析：
这里的@grid-float-breakpoint指定了一个临界宽度，小于这个宽度会折叠。