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"
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)
浙公網安備 33010602011771號