使用bootstrap3.0搭建一个具有自定义风格的侧边导航栏

Posted 2020-10-30 烛火星光

由于工作变动，新的项目组，可能会涉及到更多的类似于后台管理系统这一类的项目，而且开发可能更加偏向于传统型的开发，希望今后能够在新的项目中能够用得上vuejs吧！

接手项目的时候，就是一个后台管理系统，而且采用了Bootstrap进行搭建，页面大致模型也基本搭建成功了。然后看到页面上有一个侧边栏，之前是他们从别的地方找出来的一个侧边栏，给人的感觉总是差那么点意思。所以重构了一下。具体的效果，请移步bootstrap-sidebar 。

其实主要就解决了两个问题：

1、与内容等高，最小高度为一屏的高度。

　　之前是设置了一个最小高度，min-height: 1200px; 问题在于当页面内容很少的时候，不足一屏，此时也会出现滚动条。

html {
    min-height: 100%;
    position: relative;
}

　　关键点在于给html标签设置一个position:relative; 然后左侧导航栏进行相对定位的时候，才能相对到html标签，而不能让其默认相对body标签，经过验证，即使给body标签设置同样的样式的时候，在不满一屏和超过一屏当中切换的时候，无法达到我们预想的效果，而设置html标签的属性，则能完美达成。

2、自定义部分导航样式

　　这块其实就是写css咯，每一个前端应该都是从这里入门的吧！

　　我使用了scss预编译，本身Bootstrap官方也提供了sass版本的。所以继续写就好了。也没什么好说的！

@import "./bootstrap/variables";
$brand-muted: $gray-light !default;
$scences: ( "primary": $brand-primary, "success": $brand-success, "info": $brand-info, "danger": $brand-danger, "muted": $brand-muted, "warning": $brand-warning);
// 导航栏的辅助色调是否以自己设置的色值来显示，还是使用primary、 success等色值
// 自定制的话$isCustomNavBgColor为true，$navBgColor传入自定制的色值
$isCustomNavBgColor: false;
$navBgColor: orange;
html {
    min-height: 100%;
    position: relative;
}

.wrap {
    padding-left: 20%;
}

@media screen and (min-width: 1500px) {
    .wrap {
        padding-left: 300px;
    }
}

@media screen and (max-width: 1200px) {
    .wrap {
        padding-left: 240px;
    }
}


/**
  *  背景色的设置
  *  params： $color 初始化默认颜色   $lignten 提升亮度百分比
  */

@mixin changeBgColor($color: rgb(34, 40, 55), $lignten: 0) {
    @if $lignten && $lignten !=0 {
        background-color: lighten($color, $lignten);
    }
    @else {
        background-color: $color;
    }
}

@each $scence,
$theme in $scences {
    $color: map-get($scences, $scence);
    @if $isCustomNavBgColor==true {
        $color: $navBgColor;
    }
    .nav-#{$scence} {
        li {
            a {
                color: lighten($color, 45%);
                padding: $panel-body-padding;
                &:hover {
                    color: lighten($color, 45%);
                    background-color: darken($color, 15%);
                }
                &:focus {
                    @include changeBgColor($lignten: 10%);
                }
            }
            &.active {
                a {
                    color: $color;
                    &:hover {
                        color: lighten($color, 45%);
                    }
                }
            }
            &.active:after {
                background-color: $color;
            }
        }
    }
}

.nav-aside {
    @include changeBgColor();
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 20%;
    min-width: 240px;
    max-width: 300px;
    li {
        position: relative;
        a {
            @include changeBgColor($lignten: 10%);
        }
        &.active:after {
            content: "";
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 4px;
        }
    }
}

.nav {
    #{&} {
        margin-top: 2px;
        li a {
            text-indent: 1em;
        }
    }
}