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)

https://v3.bootcss.com/components/#navbar

posted @ 2022-10-13 11:26 小尚不浪阅读(128) 评论(0) 收藏举报

刷新页面返回顶部