django+bootstrap_Django入门笔记3

Django视图模板

使用Bootstrap实现静态网页页面

1、页面布局设计

>博客首页

>文章详情页

2、了解Bootstrap以及Bootstrap的栅格系统(www.bootcss.com)

>来自美国Twitter的前端框架

>提供非常的的控件并附带源码

>栅格系统把页面均分为十二等份

3、实现静态网页

>新建templates文件,在文件中创建index.html

>输入内容并预览

<html lang="en"><head>    <meta charset="UTF-8">    <title>Django框架学习笔记title>        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script>head><body><div class="container page-header">    <h1>Django框架学习笔记    <small> — by ARM teachersmall>    h1>div><div class="container page-body">        <div class="col-md-9" role="main">                <div class="body-main">                        <div >                                <h2>Django学习笔记1h2>                                <p>                    一、环境搭建                    1、python环境搭建,自行百度即可                    2、pycharm工具的安装                    3、安装Django                    pip  insatll  django                    查看是否安装成功:django-admin                    二、django基本命令                    常用的基本命令有:                    startproject   创建一个Django项目                    startapp    创建一个Django应用                    check     校验项目完整性                    runserver    本地简易运行Django项目                    shell    进入Django项目的python shell环境                    test    执行Django用例测试                    常用的数据库相关命令有:                    makemigrations  创建模型变更的迁移文件                    migrate   执行上一个命令创建的迁移文件                    dumpdata  把数据库数据导出到文件                    loaddata  把文件数据导入到数据库                    创建项目命令:                    django-admin startproject django_demo                    项目文件结构和运行状态                    项目配置文件:settings.py                    项目路由配置文件:urls.py                    项目管理文件:manage.py                    三、初识Django应用                    1、Django应用 VS Django项目                    一个django项目就是一个基于Django的web应用;                    一个django应用就是一个可重用的python软件包                    每个应用可以自己管理模型、视图、模板、路由和静态文件等                    一个django项目包含一组配置和若干个Django应用                    2、Django应用目录介绍                    views.py:视图处理的地方                    models.py:定义应用模型的地方                    admin.py:定义Admin模块管理对象的地方                    apps.py:声明应用的地方                    tests.py:编写应用测试用例的地方                    urls.py:(自行创建)管理应用路由的地方                    四、Django之Hello World                    Django视图                    Django路由                    新建文件urls.py                    项目层次的路由配置                    应用添加到配置里                    启动服务,查看结果                    实现过程                p>            div>            <div >                <h2>Django学习笔记2h2>                <p>                    一、了解和认识Django模型层                    1、什么是模型层                    位于Django视图层和数据库之间;屏蔽不同数据库之间的差异                    python对象和数据库表之间转换;开发者更加专注于业务逻辑的开发                p>            div>        div>    div>        <div class="col-md-3" role="complementary">        <div>            <h2>最新文章h2>            <h4><a href="#">最新文章1a>h4>            <h4><a href="#">最新文章2a>h4>            <h4><a href="#"> 最新文章3a>h4>            <h4><a href="#"> 最新文章4a>h4>            <h4><a href="#"> 最新文章5a>h4>            <h4><a href="#"> 最新文章6a>h4>            <h4><a href="#"> 最新文章7a>h4>            <h4><a href="#"> 最新文章8a>h4>            <h4><a href="#"> 最新文章9a>h4>            <h4><a href="#"> 最新文章10a>h4>        div>    div>div>body>html>

f4e915872048a7f5186398cbf0f93370.png

4、实现文章的详情页

>在templates文件夹下创建detail.html文件

>输入内容并预览

<html lang="en"><head>    <meta charset="UTF-8">    <title>Django学习笔记title>        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script>head><body><div class="container page-header">    <h1>Django学习笔记1h1>div><div class="container body-main">                        <div >                                <p>                    一、环境搭建                    1、python环境搭建,自行百度即可                    2、pycharm工具的安装                    3、安装Django                    pip  insatll  django                    查看是否安装成功:django-admin                    二、django基本命令                    常用的基本命令有:                    startproject   创建一个Django项目                    startapp    创建一个Django应用                    check     校验项目完整性                    runserver    本地简易运行Django项目                    shell    进入Django项目的python shell环境                    test    执行Django用例测试                    常用的数据库相关命令有:                    makemigrations  创建模型变更的迁移文件                    migrate   执行上一个命令创建的迁移文件                    dumpdata  把数据库数据导出到文件                    loaddata  把文件数据导入到数据库                    创建项目命令:                    django-admin startproject django_demo                    项目文件结构和运行状态                    项目配置文件:settings.py                    项目路由配置文件:urls.py                    项目管理文件:manage.py                    三、初识Django应用                    1、Django应用 VS Django项目                    一个django项目就是一个基于Django的web应用;                    一个django应用就是一个可重用的python软件包                    每个应用可以自己管理模型、视图、模板、路由和静态文件等                    一个django项目包含一组配置和若干个Django应用                    2、Django应用目录介绍                    views.py:视图处理的地方                    models.py:定义应用模型的地方                    admin.py:定义Admin模块管理对象的地方                    apps.py:声明应用的地方                    tests.py:编写应用测试用例的地方                    urls.py:(自行创建)管理应用路由的地方                    四、Django之Hello World                    Django视图                    Django路由                    新建文件urls.py                    项目层次的路由配置                    应用添加到配置里                    启动服务,查看结果                    实现过程                p>            div>div>body>html>

a0987da8f1e491235d7f3d3a32b3a715.png

以上,实现的是网页静态,是固定显示的,下篇继续完善

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值