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

Posted 烛火星光

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用bootstrap3.0搭建一个具有自定义风格的侧边导航栏相关的知识,希望对你有一定的参考价值。

由于工作变动,新的项目组,可能会涉及到更多的类似于后台管理系统这一类的项目,而且开发可能更加偏向于传统型的开发,希望今后能够在新的项目中能够用得上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;
        }
    }
}

  

以上是关于使用bootstrap3.0搭建一个具有自定义风格的侧边导航栏的主要内容,如果未能解决你的问题,请参考以下文章

ios UIWebView自定义Alert风格的弹框

如何自定义 MKPolyLineView 绘制不同风格的线条

在Azure中搭建Ghost博客并绑定自定义域名和HTTPS

ASP.NET 自定义项目模板

Matplotlib风格与样式

Bootstrap 3.0 媒体查询