CSS样式导航条模块
导航条：是应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠、可开可关，且在视口（viewport）宽度增加时逐渐变为水平展开模式。
下面是我自己制作页面布局时所用到的
{% block title %} 小尚不浪 {% endblock %}{% block body %} {% endblock %} {% block js %} {% endblock %}
<head>
<meta charset="UTF-8">
<script src="/static/js/jquery-3.3.1.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMX<L5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
crossorigin="anonymous"></script>
{% block title %}
小尚不浪
<link rel="stylesheet" href="{% static 'order_app/index.css' %}">
{% endblock %}
</head>
<body>
<nav class="navbar navbar-default" >
<div class="container-fluid" >
<div class="navbar-header" style="color:red">
<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="#">小尚不浪</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="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">商品录入 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{% url 'commodity_add' %}"><i class="fa fa-th-list" style="color: #46b8da"></i>
商品录入</a></li>
</ul>
</li>
<li class="nav navbar-nav">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">订单管理 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{% url 'order_add' %}"><i class="fa fa-th-list" style="color: #46b8da"></i>
订单录入</a></li>
<li><a href="{% url 'order_manage' %}"><i class="fa fa-th-list" style="..."></i>
订单管理</a></li>
</ul>
</li>
<li class="nav navbar-nav">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">出库管理 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="{% url 'warehouse_add' %}"><i class="fa fa-th-list" style="color: #46b8da"></i>
出库管理</a></li>
<li><a href="{% url 'out_warehouse_manage' %}"><i class="fa fa-th-list" style="..."></i>
出库单</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{% block body %}
{% endblock %}
{% block js %}
{% endblock %}
</body>
所呈现出的效果：
具体的各种导航条模式可以参考网址：组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
