如何修改bootstrap 默认导航条样式

bootstrap前端框架不错，能大大的加速我们开发页面的速度，但是也有不尽人意的地方，君不见，处处是默认导航条的样式，说实话，真的有些审美疲劳了。

下图为默认样式：

需要解决的问题：

1、将brand换成图片，而导航条默认的高度为50px，

2、active的菜单项实在不好看，需要更换样式。

下面我们将默认的导航条修改为现在样式：

1、修改默认css的样式，这样需要找到对应的class来修改。

2、定制bootstrap。

3、使用sass来修改css文件。

今天就第一种方式来修改：

• 修改logo高度的class为：.navbar-brand，直接修改hight：100px；

• 修改ul>li>a的行高使菜单项和logo 垂直居中。注意：a默认上下padding值为15px；所以lineheight：100 -15 -15 - 2 = 68px; （2px为a上端的边框）

• 修改ul>li>a:hover，ul>li>a:activer的border-top：2px solid #0077f9；
  background-color:transparent；ul>li>a的border-top：2px solid transparent;

• 修改navbar-default的 background-color: #fff; border-color: #fff;

ok，大功告成。

ps：不知道大家喜欢视频呢？还是文字，请大家评论里留言。