继续django学习之旅,之前我们所做的Django练习前端都非常丑。这节我们使用Bootstrap,顿时使丑陋的页面变成白天鹅。

安装Bootstrap                                      

Bootstrap是什么?

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。

django-bootstrap-toolkit

django-bootstrap-toolkit应用可以让Django非容易的集成Bootstrap。

安装django-bootstrap-toolkit

>pip install django-bootstrap-toolkit

运行bootstrap例子                                   

 

克隆django-bootstrap-toolkit 项目

https://github.com/dyve/django-bootstrap-toolkit

$ git clone git://github.com/dyve/django-bootstrap-toolkit.git

克隆下来的django-bootstrap-toolkit 项目自带demo_project,现在我们可以直接运行这个demo了。

进入demo_project 目录运行:

> python manage.py runserver

通过浏览器访问:http://127.0.0.1:8000/

wa o !! cool 比我们之前的djngo例子好看多了。

预览demo_project                                                                       

来看一下这个项目的结构吧!

通过前面多个django项目练习,我们已经对这个目录结构不陌生了。下面看看这个例子要特别注意的:

settings.py

……
INSTALLED_APPS = ('django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.sites','django.contrib.messages','django.contrib.staticfiles',# Uncomment the next line to enable the admin:# 'django.contrib.admin',# Uncomment the next line to enable admin documentation:# 'django.contrib.admindocs',
    'bootstrap_toolkit','demo_app',
)
……

要想使用bootstrap,这里必须加载bootstrap_toolkit ,demo_app则是我们当前的项目。

urls.py

from django.conf.urls import patterns, url# Uncomment the next two lines to enable the admin:
# from django.contrib import admin
# admin.autodiscover()
from django.views.generic import TemplateViewurlpatterns = patterns('',# Examples:# url(r'^$', 'demo_project.views.home', name='home'),# url(r'^demo_project/', include('demo_project.foo.urls')),# Uncomment the admin/doc line below to enable admin documentation:# url(r'^admin/doc/', include('django.contrib.admindocs.urls')),# Uncomment the next line to enable the admin:# url(r'^admin/', include(admin.site.urls)),
url(r'^$', TemplateView.as_view(template_name='index.html'), name="home"),url(r'^contact$', TemplateView.as_view(template_name='contact.html'), name="contact"),url(r'^form$', 'demo_app.views.demo_form'),url(r'^form_template$', 'demo_app.views.demo_form_with_template'),url(r'^form_inline$', 'demo_app.views.demo_form_inline'),url(r'^formset$', 'demo_app.views.demo_formset', {}, "formset"),url(r'^tabs$', 'demo_app.views.demo_tabs', {}, "tabs"),url(r'^pagination$', 'demo_app.views.demo_pagination', {}, "pagination"),url(r'^widgets$', 'demo_app.views.demo_widgets', {}, "widgets"),url(r'^buttons$', TemplateView.as_view(template_name='buttons.html'), name="buttons"),
)

下面再看看views.py写了哪些中间逻辑:

from django.contrib import messages
from django.forms.formsets import formset_factory
from django.shortcuts import render_to_response
from django.template.context import RequestContext
from django.core.paginator import Paginator, PageNotAnInteger, EmptyPagefrom bootstrap_toolkit.widgets import BootstrapUneditableInputfrom .forms import TestForm, TestModelForm, TestInlineForm, WidgetsForm, FormSetInlineFormdef demo_form_with_template(request):layout = request.GET.get('layout')if not layout:layout = 'vertical'if request.method == 'POST':form = TestForm(request.POST)form.is_valid()else:form = TestForm()modelform = TestModelForm()return render_to_response('form_using_template.html', RequestContext(request, {'form': form,'layout': layout,}))def demo_form(request):messages.success(request, 'I am a success message.')layout = request.GET.get('layout')if not layout:layout = 'vertical'if request.method == 'POST':form = TestForm(request.POST)form.is_valid()else:form = TestForm()form.fields['title'].widget = BootstrapUneditableInput()return render_to_response('form.html', RequestContext(request, {'form': form,'layout': layout,}))def demo_form_inline(request):layout = request.GET.get('layout', '')if layout != 'search':layout = 'inline'form = TestInlineForm()return render_to_response('form_inline.html', RequestContext(request, {'form': form,'layout': layout,}))def demo_formset(request):layout = request.GET.get('layout')if not layout:layout = 'inline'DemoFormSet = formset_factory(FormSetInlineForm)if request.method == 'POST':formset = DemoFormSet(request.POST, request.FILES)formset.is_valid()else:formset = DemoFormSet()return render_to_response('formset.html', RequestContext(request, {'formset': formset,'layout': layout,}))def demo_tabs(request):layout = request.GET.get('layout')if not layout:layout = 'tabs'tabs = [{'link': "#",'title': 'Tab 1',},{'link': "#",'title': 'Tab 2',}]return render_to_response('tabs.html', RequestContext(request, {'tabs': tabs,'layout': layout,}))def demo_pagination(request):lines = []for i in range(10000):lines.append(u'Line %s' % (i + 1))paginator = Paginator(lines, 10)page = request.GET.get('page')try:show_lines = paginator.page(page)except PageNotAnInteger:# If page is not an integer, deliver first page.show_lines = paginator.page(1)except EmptyPage:# If page is out of range (e.g. 9999), deliver last page of results.show_lines = paginator.page(paginator.num_pages)return render_to_response('pagination.html', RequestContext(request, {'lines': show_lines,}))def demo_widgets(request):layout = request.GET.get('layout', 'vertical')form = WidgetsForm()return render_to_response('form.html', RequestContext(request, {'form': form,'layout': layout,}))

剩下的就是模板目录templates 了,里面的html模板页面较多,我就不一一列出了。不过,现在最兴奋的就是去修改上面的文字,让其看起来更像我们自己的“网站”。

  在后面的学习中,我们将以此为基础进行。

djngo快速实现--使用Bootstrap相关推荐

  1. 如何简单快速的修改Bootstrap

    Bootstrap并不是单单意味着HTML/CSS界面框架,更确切的说,它改变了整个游戏规则.这个囊括了应有尽有的代码框架使得许多应用和网站的设计开发变得简便许多,而且它将大量的HTML框架普及成了产 ...

  2. 快速理解决策树 bootstrap,bagging,boosting,online boosting-五个概念

    决策树是一种解决分类问题的绝好方法,顾名思义,它正像一棵大树一样,由根部不断生长出很多枝叶:它的优点实在太多,比如可以避免缺失值的影响.可以处理混合预测.模型容易展示等.然而,决策树的实际应用也绝不简 ...

  3. Bootstrap学习笔记01【快速入门、栅格布局】

    Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...

  4. Bootstrap快速入门(含旅游网案例)

    Bootstrap快速入门 Bootstrap 更深入学习,进入Bootstrap中文网文档文档地址 很多案例,现学现用 Bootstrap: 概念: 一个前端开发的框架,Bootstrap,来自 T ...

  5. 【JavaWeb】前端框架之Bootstrap

    文章目录 1 概念 2 快速入门 3 响应式布局 4 CSS样式和JS插件 1 概念 BootStrap是前端开发框架,基于HTML.CSS.JavaScript. 优点: 定义了很多CSS样式和JS ...

  6. 前端框架之bootstrap学习(一)

    Bootstrap介绍 2011年8月,Twitter的设计师Mark Otto和Jacob Thornton发布了一个前端开发工具:Bootstrap.2012年2月,Bootstrap 2.0发布 ...

  7. Bootstrap - 前端框架

    Bootstrap介绍 2011年8月,Twitter的设计师Mark Otto和Jacob Thornton发布了一个前端开发工具:Bootstrap.2012年2月,Bootstrap 2.0发布 ...

  8. Bootstrap框架和vue哪个好-天道酬勤

    vue是功能开发框架(功能代码如何组织),他搭建好了功能架子,居于他你可以快速开发功能 bootstrap是界面效果框架(界面效果什么样子),他定义好了界面显示效果,比如按钮是什么样,输入框是什么样

  9. animate,wow,Bootstrap,scrollReveal

    Animate 1.简介 随着HTML5规范的不断完善,围绕着这一生态有很多实用的框架,极大的提高了我们的开发效率,常见的框架代表有:UI层面的有Bootstrap.Yui.JqueryUI.CSS3 ...

最新文章

  1. Oracle 之 用户与权限
  2. anconda设置镜像源_三、DockerFile 定制属于自己的专属镜像
  3. 个性化推荐认知之----数字化转型浪潮下,产品经理应如何重新认知个性化推荐?...
  4. c++ 遍历list_小白学PyTorch | 6 模型的构建访问遍历存储(附代码
  5. 数据库引擎 SQLite 发布的新行为准则,为何引众怒?
  6. 如何用TensorFlow生成令人惊艳的分形图案
  7. mysql备份文件无法回退_mysql备份灵活恢复
  8. 手机App性能测试工具Genymotion安卓模拟器使用和简介
  9. 迅为恩智浦iTOP-IMX6开发平台
  10. Elasticsearch常用搜索和分词器
  11. 《OpenGL编程指南第7版》3视图
  12. 分享50道硬核Python编程题,面试前过一遍
  13. 牛散NO.2:MACD西施说风情,柳下惠高位勿迷情
  14. 三分钟告诉你怎么AI生成绘画图片
  15. 计算机教研评课记录,信息技术2.0 | 评课磨课共成长 信息技术促进步 ——东光县第二实验小学信息技术2.0数学组 课例研讨...
  16. matlab模式识别提取特征向量,一种基于小波特征向量提取的手机检测方法与流程...
  17. 怎么提高公文写作水平?原来这就是公文参考模版
  18. python元组切片_Python中如何对元组进行切片
  19. 【代码相关-ROS】利用小觅采集的rosbag,制作双目图像集,跑orbslam2
  20. sensor尺寸、35mm等效焦距、FOV、ZOOM倍数的换算关系

热门文章

  1. 【Java 虚拟机原理】Dalvik 虚拟机 ( 打包 Jar 文件和 Dex 文件 | 反编译 Dex 文件 | 分析 Dex 文件反编译结果 )
  2. 【组合数学】生成函数 ( 正整数拆分 | 无序 | 有序 | 允许重复 | 不允许重复 | 无序不重复拆分 | 无序重复拆分 )
  3. 组合,多态,封装, @property
  4. centos 6.2用yum安装中文输入法
  5. CentOS 7 源码编译安装 Redis
  6. 自动化测试中,测试数据如何管理?
  7. 初识jvm-1.Java类的加载机制
  8. python模块之序列化模块
  9. JavaScript 笔记(2) -- 类型转换 正则表达 变量提升 表单验证
  10. Javascript面向对象编程(一):封装