如下所示的bootstrap样式，定义了一个导航栏，当浏览器宽度变窄时，列表项自动折叠，在右边边会出现一个button，点击按钮列表项会下拉出现：

    <!-- Static navbar -->
    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed"
              data-toggle="collapse" data-target="#navbar"
              aria-expanded="false" aria-controls="navbar">
          </button>
          <a class="navbar-brand" href="{% url 'learning_logs:index' %}">
              Learning Log</a>
        </div>

        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li><a href="{% url 'learning_logs:topics' %}">Topics</a></li>
          </ul>

          <ul class="nav navbar-nav navbar-right">
            {% if user.is_authenticated %}
              <li><a>Hello, {{ user.username }}.</a></li>
              <li><a href="{% url 'users:logout' %}">log out</a></li>
            {% else %}
              <li><a href="{% url 'users:register' %}">register</a></li>
              <li><a href="{% url 'users:login' %}">log in</a></li>
            {% endif %}
          </ul>
        </div><!--/.nav-collapse -->

      </div>
    </nav>

满屏时：

满屏

窄屏时：

窄屏

<nav>标签是导航栏，中间的样式可以网上查。
.navbar-header样式使头部的文字看起来大一些，而且也是导航栏的头部，当在小屏幕上时是唯一能够显示的导航栏内容之一。

botton按钮定义的就是小屏幕右边的东西。其样式class=“navbar-toggle collapsed”是必不可少的。navbar-toggle样式是控制按钮的，
collapsed是为了响应折叠插件的。
data-toggle=“collapse”表明这个button是一个折叠控件，其折叠的内容指向data-target="#navbar"，即是id为navbar的内容。
aria-expanded=“false”表示初始控件是折叠的。

<id="navbar">中的class="navbar-collapse collapse"，nvabar-collapse是导航栏的折叠样式，collapse这是表示初始时是折叠的，没有collapse样式，那么缩放后导航栏元素将是展开的。