0. 引入

首先引入Bootstrap：

1
<link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">

重申，因为Django是根据路由寻找文件而非路径寻找，因此在settings中的STATIC_URL是：

1
2
3
4
STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static_file'),
)

若引入时选择了文件夹名static_file就会报错。

1. Bootstrap使用

  • 样式：Bootstrap封装好了前端美化样式。在官网上寻找样式，添加对应的class名称或内容即可。就是一个看图拷贝。

  • 响应式：即页面布局根据窗口像素宽窄变化。这种是通过css的@media关键字实现：（导航条、栅格系统）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
    @media (max-width:800px) {
    	// <= 800px时
    }
    @media (max-width:600px) {
    	// <= 600px时
    }  
    // 由于下方效果可覆盖上方，因此这便是一个递进式的响应效果
    </style>

    fontawesome提供了许多图标，可以作为Bootstrap的一个补充工具。同样也是在<head>中引入后即可使用：

    1
    <link rel="stylesheet" href="/static/font-awesome-4.7.0/css/font-awesome.css">