BootstrapPython3.4+Django1.9+Bootstrap3

兑现与原理

Python集成Django开发框架后,可以透过以cmd命令提示符下起工程,工程称为也learn_models

django-admin.py startproject learn_models

还进入到learn_models里面,新建一个app项目

cd learn_models
python manage.py startapp learn

此刻目录的布局来这些文件

C:\USERS\SHILEIDING\LEARN_MODELS
│  manage.py
│  
├─learn
│  │  admin.py
│  │  models.py
│  │  tests.py
│  │  views.py
│  │  __init__.py
│  │  
│  └─migrations
│   __init__.py
│   
└─learn_models
  settings.py
  settings.pyc
  urls.py
  wsgi.py
  __init__.py
  __init__.pyc

重复失官网下载最新的Bootstrap3框架文件 http://getbootstrap.com/getting-started/#download 下载的文书夹可以看出有css、fonts、js三个(功能相当可怜),这便是Bootstrap
3的方方面面,以下就如当刚刚新建的Django工程集合Bootstrap3,进入learn_models目录,新建一个static文件夹,再当static里面新建一个bootstrap文件夹,将下载的老三单文件夹放上。

回到learn_models目录,进入learn目录里,新建一templates文书夹,里面存Bootstrap的html界面,如此处新建一文件test.html,要引用Bootstrap
和jQuery等息息相关库,这里要是一贯存放的static文件

<!DOCTYPE html>
{% load staticfiles %}
<html>
<head lang="en">
    <meta charset="UTF-8">
     <!-- 引入jQuery -->
    <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
     <!-- 引入 Bootstrap -->
     <link href="{% static 'bootstrap/css/bootstrap.min.css' %}" rel="stylesheet" type="text/css">
     <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet" type="text/css">
      <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
     <script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}"></script>          
     <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]--> 
    <title>数据展示平台</title>         
</head>
<body>
<!-- bootstrap 特性容器 -->
 <div class="container">
     <h1>Hello, world! </h1> 
 </div>
</body>
</html>

文本开始的 {% load staticfiles
%}就是加载static目录,为了找到static目录,需要多少修改下”…/learn_models/learn_models/settings.py”中之布置,主要有零星片修改

INSTALLED_APPS = (
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
  #注册新建的app 
  'learn',
)

INSTALLED_APPS中添加新建的app,然后配置static相关

STATIC_URL = '/static/'
STATICFILES_DIRS = (

os.path.join(BASE_DIR, 'static'),

)

用static目录放在 STATICFILES_DIRS 中,这样尽管足以load到我们刚刚下载的bootstrap
了,bootstrap依赖让jQuery库,所以毫无疑问要添加,我们这里是一直引用的,如果生下载版本就需要在static里还引用就尽。

这会儿前端html已经得以使相关bootstrap属性了,但怎么通过Django
的http协议看为?这就算是Django传奇的MVC模型了,刚刚的templates文件夹就是呈现层,展示被用户看的前端,views.py负责处理业务逻辑层,处理要和归请求,models.py负责数据存取层,处理数据库的有关属性。前端发出之GET或POST请求而经urls.py映射到views的系措施中,所以如果在urls.py中布局映射关系,这里要请求路径为 http://127.0.0.1:8000/test/ 则配置也

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
  #前面是正则表达式
    url(r'^test/','learn.views.test',name='test'),
 ]

照到对应之views.py中,这里大概实现test方法,在views.py中丰富即可

#Bootstrap 测试
def test(request):
     return render(request, 'test.html')

当浏览器发出test请求后,先经过urls映射到views中之test方法,处理逻辑后推至前者test.html中展示,html显示的情可采用下载的bootstrap渲染。

运行

在cmd中cd到 learn_models目录下 ,此时底目结构如下

C:\USERS\SHILEIDING\LEARN_MODELS
│  manage.py
│  
├─learn
│  │  admin.py
│  │  models.py
│  │  tests.py
│  │  views.py
│  │  __init__.py
│  │  
│  ├─migrations
│  │      __init__.py
│  │      
│  └─templates
│       test.html
│       
├─learn_models
│   settings.py
│   settings.pyc
│   urls.py
│   wsgi.py
│   __init__.py
│   __init__.pyc
│   
└─static
  └─bootstrap
    ├─css
    │   bootstrap-theme.css
    │   bootstrap-theme.css.map
    │   bootstrap-theme.min.css
    │   bootstrap.css
    │   bootstrap.css.map
    │   bootstrap.min.css
    │   
    ├─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

好观看出manage.py,这正是运行的管理器,先同步数据库,然后运行工程

#同步数据库
python manage.py makemigrations
python manage.py migrate
#运行工程
python manage.py runserver

接下来打开 http://127.0.0.1:8000/test/ 出现于偏中间的hello
world 表明整合成  

相关文章