零基础建站培训介绍

当前位置:

bootstrap响应式导航如何制作

bootstrap是一个非常好用的网站前端框架,可以让我们制作响应式网站时比较简单。

对于响应式网站制作时,响应式导航是比较重要的部分。下面学做网站论坛就来讲一下响应式导航如何通过bootstrap制作。

先看下bootstrap响应式导航PC端的效果:bootstrap响应式导航如何制作1

再看下bootstrap响应式导航手机端的效果:bootstrap响应式导航如何制作2

bootstrap响应式导航制作步骤:

  • 首先肯定是在网站上引入bootstrap框架,方法见:网站如何正确引入bootstrap框架
  • 在需要显示网站导航的位置,使用以下的代码去制作自适应导航。
    <nav class="navbar navbar-default">
    <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
    <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>  <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>

    </ul>
    </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
    </nav>
  • bootstrap响应式导航代码分为二个部分,上面是手机状态下出现的按钮代码,下面是PC状态下的横排导航代码。
  • 只需要使用上面的代码,就可以轻松在自己做网站时实现响应式导航了。
上一课:

发表评论

零基础学建站就到学做网站论坛