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>

转载于:https://www.cnblogs.com/jeepzp/p/8403586.html

Django----bootstrap导航栏的使用相关推荐

BootStrap导航栏的使用
默认的导航栏创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...
Html 5/CSS 的学习（二） —— Bootstrap 导航栏
参考 Bootstrap 导航栏 0. 导航栏类别 (1)默认导航栏:class="navbar navbar-default": (2)响应式导航栏:要折叠的内容必须包裹在cla ...
Bootstrap导航栏实例讲解
导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...
css设置导航栏背景颜色,更改bootstrap导航栏背景颜色和字体颜色
3 个答案: 答案 0 :(得分:46) 我使用以下CSS成功设置了Bootstrap导航栏的样式.你也没有在CSS中定义任何字体,这就是字体没有改变的原因.可以在here找到使用此CSS的网站. . ...
Bootstrap导航栏始终固定在页面顶部
Bootstrap导航栏始终在页面顶部引入文件,这是需要自己去官网下载的 <link rel="stylesheet" type="text/css" ...
修改bootstrap导航栏样式(颜色，高)
提示:记录bootstrap导航栏样式(颜色,高)的修改文章目录前言一.bootstrap导航栏样式 (颜色,高) 的修改前言在写自适应网页时想使用bootstrap实现,但与原稿的有一些差 ...
自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
Bootstrap导航栏navbar源码分析
1.本文目地:分析bootstrap导航栏及其响应式的实现方式,提升自身css水平先贴一个bootstrap的导航栏模板 http://v3.bootcss.com/examples/navbar- ...
Bootstrap导航栏
导航栏: <div id="menu-nav" class="navbar navbar-default navbar-inverse navbar-fixed-t ...
Bootstrap导航栏注释
>Bootstrap官方文档里实现了一个导航栏: 添加了注释,帮助以后理解: <!--navbar-default,默认是灰色: navbar-inv ...

Django----bootstrap导航栏的使用

Django----bootstrap导航栏的使用相关推荐

最新文章

热门文章