bootstrap导航条

通过使用bootstrap库，我们可以快速实现导航条功能。

在Django中，超链接的url可以用{% url ‘url_namespace:url_name’ optional_ args %}来表示。url_name和url_name分别在上层urls.py（通常会include 当前应用的urls.py）和当前应用的urls.py文件中定义，对于使用匹配模式的url，在后面添加可选的参数，optional_args。Django提供的url解析分发功能为代码提供了更好的可移植性。

以下是一个导航条的示例代码，包含下来选单，还包含一个搜索框。

<nav class=”navbar navbar-inverse navbar-static-top” role=”navigation”>

<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″>
<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=”{% url ‘mysite:index’ %}”>首页</a>
</div>

<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”>下拉菜单1<b class=”caret”></b></a>
<ul class=”dropdown-menu”>
<li><a href=”{% url ‘mysite:myapp_detail’ 1 %}”>选项1</a></li>
<li><a href=”{% url ‘mysite:myapp_detail’ 2 %}”>选项2</a></li>
<li><a href=”{% url ‘mysite:myapp_detail’ 3 %}”>选项3</a></li>
</ul>
</li>

<li class=”dropdown”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>下拉菜单2<b class=”caret”></b></a>
<ul class=”dropdown-menu”>
<li><a href=”{% url ‘mysite:detail’ 1 %}”>选项1</a></li>
<li><a href=”{% url ‘mysite:detail’ 2 %}”>选项2</a></li>
<li><a href=”{% url ‘mysite:detail’ 3 %}”>选项3</a></li>
<li><a href=”{% url ‘mysite:detail’ 4 %}”>选项4</a></li>
<li><a href=”{% url ‘mysite:detail’ 5 %}”>选项5</a></li>
</ul>
</li>

<li class=”dropdown”>
<a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>关于 <b class=”caret”></b></a>
<ul class=”dropdown-menu”>
<li><a href=”{% url ‘mysite:about_software’ %}”>软件信息</a></li>
<li><a href=”{% url ‘mysite:about_author’ %}”>作者信息</a></li>
</ul>
</li>

</ul>

<form class=”navbar-form navbar-right” role=”search” method=”POST” action=”search/”>
{% csrf_token %}
<div class=”form-group”>
<input type=”text” class=”form-control” placeholder=”搜索” name=”search” value=”{{ searchvalue }}” />
</div>
<button type=”submit” class=”btn btn-default”>查询</button>
</form>

</div>

</nav>

 

特别值得指出，如果把navbar-static-top选项改为navbar-fixed-top，可以将导航条固定在页面最上端。