具有移动支持和徽标的 Html 导航栏答案

【问题标题】：Html navbar with mobile support and logo具有移动支持和徽标的 Html 导航栏
【发布时间】：2016-06-13 08:21:50
【问题描述】：

我想在我的网站上有一个导航栏，但我想不通我希望它看起来像 this 但我想在上面有一个标志，这就是我遇到的问题。它应该看起来像 site 上的底部

【问题讨论】：

你有代码吗？

【解决方案1】：

转到https://getbootstrap.com/getting-started/，您可以学习使用引导程序轻松创建导航栏等内容。

把它放在你的 html 脚本顶部的 head 部分，让 bootstrap 工作或下载 bootstrap 并将它放在你的项目文件夹中。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

这是一个使用引导程序的示例。

        <!--appear when room to display is smaller-->

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="#">Your Logo</a>
      </div>


      <div class="collapse navbar-collapse" id="top">
        <ul class="nav navbar-nav">
          <li class="active">
            <a href ="put your link here">
              Item 
            </a>
          </li>

     <!--align content to the right-->
      <ul class="nav navbar-nav navbar-right">
        <li class="active">
          <a href ="">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&nbsp;
            Item
          </a>
        </li>
        <li class="active">
          <a href ="">
            <span class="glyphicon glyphicon-off" aria-hidden="true"></span>&nbsp;
            Item
          </a>
        </li>
      </ul>
      </div>
    </div>
  </nav>

【讨论】：