【python + django + bootstrap】Web开发试用

最新推荐文章于 2024-10-09 09:09:58 发布

Joanna_yan

最新推荐文章于 2024-10-09 09:09:58 发布

阅读量773

点赞数 1

分类专栏： Python笔记文章标签： django python

本文链接：https://blog.csdn.net/Joanna_yan/article/details/105536779

版权

Python笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Ubuntu下python + django + bootstrap从零开始搭建在：
https://blog.csdn.net/Joanna_yan/article/details/105529785

一、创建项目（project）和应用（app）

二、bootstrap网站模板

三、配置index

四、测试

一、创建项目（project）和应用（app）

一切都在/home/rooto/code/sample文件夹中，项目名【myproject】，应用名【myapp】。
1.创建项目project：
django-admin.py startproject myproject

2.为项目myproject创建应用app：
cd myproject
django-admin.py startapp myapp

3.myapp添加到myproject的配置文件
在myproject的配置文件/sample/myproject/myproject/settings.py中增加myapp

二、bootstrap网站模板

1.在项目目录sample/myproject下创建static 目录
2.下载bootstrap，在bootstrap中文网可以下载到最新版本，选第一个连接下载，也可以利用下载地址使用命令行下载

下载并解压bootstrap：
wget https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip
unzip bootstrap-3.3.7-dist.zip
把解压出来的css、fonts、js三个文件夹放到static中：

3.配置静态文件
/sample/myproject/myproject/settings.py中增加静态文件路径STATICFILES_DIRS：
STATICFILES_DIRS = (
'/home/rooto/code/sample/myproject/static/',
)

三、配置index

1.创建默认的模板目录
mkdir /home/rooto/code/sample/myproject/myapp/templates
2.新建index.html
gedit /home/rooto/code/sample/myproject/myapp/templates/index.html
内容为：https://www.runoob.com/bootstrap/bootstrap-make-a-website.html

<!DOCTYPE html>
<!-- saved from url=(0050)http://getbootstrap.com/examples/starter-template/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://getbootstrap.com/favicon.ico">
 
    <title>Starter Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  </head>
 
  <body>
 <div class="jumbotron text-center" style="margin-bottom:0">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>重置浏览器窗口大小查看效果！</p> 
</div>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">网站名</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">主页</a></li>
        <li><a href="#">页面 2</a></li>
        <li><a href="#">页面 3</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h2>关于我</h2>
      <h5>我的照片:</h5>
      <div class="fakeimg">这边插入图像</div>
      <p>关于我的介绍..</p>
      <h3>链接</h3>
      <p>描述文本。</p>
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">链接 1</a></li>
        <li><a href="#">链接 2</a></li>
        <li><a href="#">链接 3</a></li>
      </ul>
      <hr class="hidden-sm hidden-md hidden-lg">
    </div>
    <div class="col-sm-8">
      <h2>标题</h2>
      <h5>副标题</h5>
      <div class="fakeimg">图像</div>
      <p>一些文本..</p>
      <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
      <br>
      <h2>标题</h2>
      <h5>副标题</h5>
      <div class="fakeimg">图像</div>
      <p>一些文本..</p>
      <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
    </div>
  </div>
</div>

<div class="jumbotron text-center" style="margin-bottom:0">
  <p>底部内容</p>
</div>
    <!-- jquery JavaScript -->
    <script src="/static/js/jquery.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script src="/static/js/bootstrap.min.js"></script> 
  
 
</body></html>

3.添加index函数
myapp 的视图文件/home/rooto/code/sample/myproject/myapp/views.py中增加index
from django.shortcuts import render,render_to_response
def index(req):
return render_to_response('index.html',)

4.配置Djiango的url
参看：https://www.cnblogs.com/bypp/p/7992933.html
/sample/myproject/myproject/urls.py中增加myapp的view的映射条目
当访问根时，由myapp的views.py中的index函数处理