首页 | 简单教程,简单编程

代码编辑器：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

<div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link active" href="#">首页</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Python</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">PHP</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Perl</a>
    </li>
  </ul>
  </div> 
</nav>
    <br/>
    
    <p>通常，小屏幕上会折叠导航栏，用户通过点击来显示导航选项</p>
<p>要创建折叠导航栏，可以在按钮上添加 <code>class="navbar-toggle"</code> , 
 <code>data-toggle="collapse"</code> 与 data-target="# <strong>thetarget</strong>" CSS 类</p>
<p>然后在设置了 <code>class="collapse navbar-collapse"</code> CSS 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮data-target的上指定的 id</p>
</div>

代码编辑器：

运行结果：