Python项目学习2022/06/02|Web应用程序|设置项目“学习笔记”样式

最新推荐文章于 2024-09-15 22:31:42 发布

Joy_ou悠

最新推荐文章于 2024-09-15 22:31:42 发布

阅读量138

点赞数

分类专栏： Python项目学习文章标签： python 学习

本文链接：https://blog.csdn.net/weixin_49079904/article/details/125110177

版权

本文档记录了2022/06/02的Python学习内容，主要聚焦于Web应用程序项目——“学习笔记”的样式设置。通过使用django-bootstrap3库，设置包括首页、登录页面、new_topic、topics和topic页面的样式。安装和配置django-bootstrap3时，需注意检查setting.py、STATICFILES_DIRS设置，并解决可能的模块导入错误。同时，详细说明了如何修改各个页面的HTML模板以应用Bootstrap样式。

摘要由CSDN通过智能技术生成

2022/06/02学习内容
整理时间：2022/06/03
参考资料：《python编程从入门到实践》

项目：Web应用程序

六、设置项目“学习笔记”样式

1.应用程序django-bootstrap3
2.使用Bootstrap设置项目“学习笔记”样式
3.使用jumbotron设置主页样式
4.设置登录页面样式
5.设置new_topic页面样式
6.设置topics页面样式
7.设置topic页面中条目样式

应用程序django-bootstrap3

1）安装django-bootstrap3

# 控制台
pip install django-bootstrap3

2）修改I:\learning_log\learning_log\settings.py
添加第三方应用程序
django-bootstrap3包含jQuery,使用Bootstrap模板交互式元素

# I:\learning_log\learning_log\settings.py

# 添加第三方应用程序
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # 第三方应用程序
    'django-bootstrap3',

    # 我的应用程序
    'learning_logs',
    'users',
]

# django-bootstrap3包含jQuery,使用Bootstrap模板交互式元素
# 末尾：django-bootstrap3设置
BOOTSTRAP3={
   
    'include_jquery':True,
}

使用Bootstrap设置项目“学习笔记”样式

修改I:\learning_log\learning_logs\templates\learning_logs\base.html
1）定义HTML头部
2）定义导航栏
3）定义页面主要部分

<!DOCTYPE html>
{
   % load bootstrap3 %}

<html lang="en">
    <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>Learning Log</title>
        {
   % bootstrap_css %}
        {
   % bootstrap_javascript %}
    </head>

    <body>
        <!-- Static navbar -->
        <nav class="navbar navbar-header">
            <div class="container">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed"
                            data-toggle="collapsed" data-targer="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                    </button>
                    <a