用BootStrap实现响应式导航条效果

最新推荐文章于 2019-02-21 17:32:14 发布

stormzi

最新推荐文章于 2019-02-21 17:32:14 发布

阅读量1.7k

点赞数

分类专栏： BootStrap 文章标签： BootStrap

本文链接：https://blog.csdn.net/stormzi/article/details/82704847

版权

本文展示了如何利用BootStrap实现响应式导航条，当窗口尺寸小于980像素时，导航条会收起，并显示切换按钮。点击切换按钮后，导航条会展开。

摘要由CSDN通过智能技术生成

导航条效果图如下：

拖动窗口缩小到小于980像素，可以看到收起来的导航条以及切换按钮：

点击切换按钮效果如下：

代码如下：

  <header role="banner">
      <nav role="navigation" class="navbar navbar-static-top navbar-default">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar">&l