响应式导航

1，利用bootstrap来实现响应式的导航条

bootstrap中的导航组件都依赖同一个.nav类，状态类也是共用的。

要实现一个导航条在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

导航条内所包含元素溢出

由于 Bootstrap 并不知道你在导航条内放置的元素需要占据多宽的空间，你可能会遇到导航条中的内容折行的情况（也就是导航条占据两行）。解决办法如下：

减少导航条内所有元素所占据的宽度。
在某些尺寸的屏幕上（利用响应式工具类）隐藏导航条内的一些元素。
修改导航条在水平排列和折叠排列互相转化时，触发这个转化的最小屏幕宽度值。可以通过修改 @grid-float-breakpoint 变量实现，或者自己重写相关的媒体查询代码，覆盖 Bootstrap 的默认值。

2，bootstrap的实现依赖javascript插件

如果 JavaScript 被禁用，并且视口（viewport）足够窄，致使导航条折叠起来，导航条将不能被打开，.navbar-collapse 内所包含的内容也将不可见。

响应式导航条依赖 collapse 插件，定制 Bootstrap 的话时候必将其包含。

一，bootstrap设置的是当屏幕宽度小于768px时，导航条变为折叠排列。

当屏幕小于768px时，此时的css样式为：

.navbar-default .navbar-collapse {
    border-color: #e7e7e7;
}

.container>.navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}

.navbar-fixed-top .navbar-collapse {
    max-height: 340px;
}

.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

.collapse {
    display: none;
}

折叠按钮的样式：

.navbar-default .navbar-toggle {
    border-color: #ddd;
}
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

当屏幕大小大于768px时，导航条平铺。此时css清单为：

.navbar-default .navbar-collapse {
    border-color: #e7e7e7;
}

@media (min-width: 768px)
.container>.navbar-collapse {
    margin-right: 0;
    margin-left: 0;
}

@media (min-width: 768px)
 .navbar-fixed-top .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}

@media (min-width: 768px)
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}

@media (min-width: 768px)
.navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.navbar-fixed-top .navbar-collapse {
    max-height: 340px;
}

折叠按钮的样式：

.navbar-default .navbar-toggle {
    border-color: #ddd;
}
@media (min-width: 768px)
.navbar-toggle {
    display: none;
}

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

完整的一个导航栏源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>响应式导航条</title>
    <link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="assets/css/bootstrap-theme.css" rel="stylesheet"/>

    <style>
        .main{
            background-color: #2aabd2;
            height: 1200px;
        }
    </style>
</head>
<body>
<header>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <!--左侧logo区域-->
            <div class="navbar-header">   <!--通过给折叠按钮加上data-target属性来实现与导航条相关-->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button><!--折叠按钮-->
                <a class="navbar-brand" href="#">
                    Brand
                </a>
            </div>
            <!--右侧导航区域--><!---主要是为导航加上.collapse 和.nav-collapse类，实现导航条的折叠效果-->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">首页</a></li>
                    <li class=""><a href="#">产品中心</a></li>
                    <li class=""><a href="#">新闻中心</a></li>
                    <li class=""><a href="#">数据下载</a></li>
                    <li class=""><a href="#">监控平台</a></li>
                    <li class=""><a href="#">联系我们</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>
<section class="main"></section>
</body>
<script src="assets/js/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
</html>

导航条内所包含元素溢出

猜你喜欢