Django - 使用CSS框架协助前端布局_danjgo+css前端

作者：我家小花儿 | 2024-03-07 05:00:55

踩

danjgo+css前端

部署Bootstrap

下载Bootstrap
- Bootstrap官网 : www.bootcss.com
下载下来后解压有三个文件夹
- css : 相关的样式文件
- fonts : 字体文件
- js : 对css样式进行一些处理, 比如下拉等等

引入bootstrap

在static文件里面创建一个文件夹bootstrap-3.3.7

基本模板

在base.html文件里面引入bootstrap的css文件和js文件
base.html

<head>
    .....
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}">
    <script type="text/javascript" src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
</head>
1
2
3
4
5

根据bootstrap官网的基本模板补全base.html文件

添加语言显示 :
头信息设置

{# 针对IE浏览器进行设置,使用最新的内核 #}
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{# 根据不同的屏幕, 响应不同的布局 #}
<meta name="viewport" content="width=device-width, initial-scale=1">
1
2
3
4

添加jquery的引用

<script type="text/javascript" src="{% static 'jquery-1.12.4.min.js' %}"></script>
1

调整导航栏

需要一个导航条这个容器

<div class="navbar navbar-default"></div>
1

因为是响应式布局, 需要加一个容器, 使用div需要加一个参数

<div class="navbar navbar-default" role="navigation">
	<div class="container-fluid"> 
    </div>
</div>
1
2
3
4

添加导航栏, 第一部分是logo部分, 使用navbar-header

<div class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
        	<a class="navbar-brand" href="{% url 'home' %}">个人博客网站</a>
        </div>
    </div>
</div>
1
2
3
4
5
6
7

第二部分是具体导航项目

<body>
    <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="{% url 'home' %}">个人博客网站</a>
            </div>
            <ul class="nav navbar-nav">
                <li><a href="{% url 'home' %}">首页</a></li>
                <li><a href="{% url 'blog_list' %}">博客</a></li>
            </ul>
        </div>
    </div>
    {% block content %}{% endblock %}
    
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

设置导航栏的下拉功能

使用button标签

 <div class="navbar-header">
   <a class="navbar-brand" href="{% url 'home' %}">个人博客网站</a>
    <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>
<div id="navbar-collapse" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        <li><a href="{% url 'home' %}">首页</a>
        </li>
        <li><a href="{% url 'blog_list' %}">博客</a>
        </li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

添加选中状态提示
base.html

<li class='{% block nav_home_active %}{% endblock %}'>
 <a href="{% url 'home' %}">首页</a>
</li>
<li class='{% block nav_blog_active %}{% endblock %}'>
    <a href="{% url 'blog_list' %}">博客</a>
</li>
1
2
3
4
5
6

接下来就是填空

固定导航栏, 在最外面的div添加 navbar-fixed-top

<div class="navbar navbar-default  navbar-fixed-top" role="navigation">
1

添加完以后会把第一个博客的标题遮挡住, 需要把导航栏的高度让出来
base.css

body {
    margin-top: 70px!important;
}
1
2
3

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/203648

Django - 使用CSS框架协助前端布局_danjgo+css前端

目录

部署Bootstrap

引入bootstrap

基本模板

根据bootstrap官网的基本模板补全base.html文件

调整导航栏

设置导航栏的下拉功能