Django----bootstrap导航栏的使用
首先需要下载bootstrap文件，然后引入：
{%load staticfiles%} <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{%block title%}{% endblock %}</title> <link rel="stylesheet" href="{%static 'base.css'%}"> <link rel="stylesheet" href="{%static 'bootstrap-3.3.7/css/bootstrap.min.css'%}">#引入bootstrap css <script src="{% static 'jquery.min.js'%}"></script>#注意：jquery引入要在script之前引入，点击等效果才能使用。 <script src="{%static 'bootstrap-3.3.7/js/bootstrap.min.js'%}"></script> {%block head_extnds%}{%endblock%} </head> <body> <div class="navbar navbar-default navbar-fixed-top" role="navigation">#首先建立一个导航栏的，div 标签需要加role="navigation" navbar-fixed-top作用是固定导航栏 <div class="container-fluid">#导航栏容器充满整个屏幕 <div class="navbar-header">#导航栏logo <button class="navbar-toggle collapsed"#响应式屏幕缩小后显示点击的效果 data-toggle="collapse" data-target="#navbar-collapse">#响应标签，必须要有navbar-collapse这两个标签 <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="{%url 'home'%}" class="navbar-brand"> 个人博客网站</a> </div> <div id="navbar-collapse" class="collapse navbar-collapse">#缩小后需要响应的内容包裹在对应的标签里面 <ul class="nav navbar-nav"> <li class="{%block active_home_extends%}{%endblock%}"><a href="{%url 'home'%}">首页</a></li> <li class="{%block active_blog_extends%}{%endblock%}"><a href="{%url 'bloglist'%}">博客</a></li> </ul> </div> </div> </div> {%block content%}{% endblock %} </body> </html>
最终实现效果：
二、 active 的使用：实现选中的效果，我们使用{%block%}active{%endblock%}实现：注意：模板标签{%block active_home_extnd%}{%end_block%}设置要唯一、不能设置为同名。
{% extends 'base.html'%}
{#标题#}
{% block title %}
{{typename.typenames}}
{% endblock %}
{#内容#}
{%block active_blog_extends%}active{%endblock%}#点击之后加入标签
{% block content %}
{#别名需要用引号#}
<div><h2>{{typename.typenames}}</h2></div>
{%for arcile in blogs%}
<a href = "{%url 'blogdetail' arcile.pk%}">
<h3>{{arcile.title}}</h3>
</a>
<p>{{arcile.content|truncatechars:10}}</p>
{%empty%}
--暂无博客--
{%endfor%}
<p>一共有{{blogs|length}}博客</p>{#显示文章博客数量#}
{% endblock %}
三、面板以及响应式设置。
响应式设计一般分为三层：
container----->row------>col-xs-12(这里的xs,sm指的是屏幕大小，具体的设置见文档！)bootstarp文档
<div class="container"> <div class="row"> <div class="col-xs-12 clo-sm-8 col-md-9 col-lg-9"> <div class="panel panel-default"> <div class="panel-heading"> {%block typetitle%}博客列表（一共有{{blogs|length}}博客）{%endblock%} </div> <div class="panel-body"> {%for arcile in blogs%} <div class="blogdetail"> <h3><a href = "{%url 'blogdetail' arcile.pk%}">{{arcile.title}}</a></h3> <p class="bloginfo"> <span class="glyphicon glyphicon-pencil" ></span>{{arcile.author}} <span class="glyphicon glyphicon-tag" ></span><a href="{%url 'blog_with_type' arcile.typename.pk%}">{{arcile.typename}}</a> <span class="glyphicon glyphicon-time" ></span>{{arcile.create_time|date:"Y-m-d"}} </p> <p>{{arcile.content|truncatechars:120}}</p> </div> {%empty%} <div class="blogdetail"> <h3>--暂无博客--</h3> </div> {%endfor%} </div> </div> </div> <div class="hidden-xs col-sm-4 col-md-3 col-lg-3"> <div class="panel panel-default"> <div class="panel-heading"> 博客分类 </div> <div class="panel-body"> <ul class="type-list"> {%for blogtype in blogtypes%} <li><a href="{%url 'blog_with_type' blogtype.pk%}">{{blogtype.typenames}}</a></li> {%empty%} 暂无分类 {%endfor%} </ul> </div> </div> </div> </div> </div>
