05--Django笔记--CSS框架协助前端布局

05–Django笔记–CSS框架协助前端布局

一、开始

打开Bootstrap官网，下载Bootstrap

将下载好的文件放入静态文件文件夹，现在的文件目录如下：

root@***:~/Program/Django/study# tree mysite
mysite
├── blog
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   └── __init__.py
│   ├── models.py
│   ├── templates
│   │   ├── blog_detail.html
│   │   ├── blog_list.html
│   │   └── blogs_with_type.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── db.sqlite3
├── manage.py
├── mysite
│   ├── asgi.py
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   ├── views.py
│   └── wsgi.py
├── requirement.txt
├── static
│   ├── bootstrap-3.4.1
│   │   ├── css
│   │   │   ├── bootstrap.css
│   │   │   ├── bootstrap.css.map
│   │   │   ├── bootstrap.min.css
│   │   │   ├── bootstrap.min.css.map
│   │   │   ├── bootstrap-theme.css
│   │   │   ├── bootstrap-theme.css.map
│   │   │   ├── bootstrap-theme.min.css
│   │   │   └── bootstrap-theme.min.css.map
│   │   ├── fonts
│   │   │   ├── glyphicons-halflings-regular.eot
│   │   │   ├── glyphicons-halflings-regular.svg
│   │   │   ├── glyphicons-halflings-regular.ttf
│   │   │   ├── glyphicons-halflings-regular.woff
│   │   │   └── glyphicons-halflings-regular.woff2
│   │   └── js
│   │       ├── bootstrap.js
│   │       ├── bootstrap.min.js
│   │       └── npm.js
│   ├── css
│   │   ├── base.css
│   │   └── home.css
│   └── js
└── templates
    ├── base.html
    └── home.html

12 directories, 41 files

然后再 base.html 文件中引用：

二、导航栏布局

根据 bootstrap 官网的文档对导航栏的介绍

<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="/blog">博客</a></li>
            </ul>
        </div>
    </div>

可以把导航栏部署成下面这个样子：

但是这样的布局在手机这样的小屏幕设备会堆叠。

<button class="navbar-toggle collapsed"></button> 中的collapsed的意思是，当设备屏幕较小，才会显示

data-target="#navbar-collapse" 表示会根据屏幕缩小的元素目标，“#”表示根据 id 寻找目标

class="navbar-fixed-top" 表示navbar会在顶部固定

即：

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <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 class="{% block nav_home_active %}{% endblock %}">
                        <a href="{% url 'home' %}">首页</a>
                    </li>
                    <li class="{% block nav_blog_active %}{% endblock %}">
                        <a href="/blog">博客</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>