繼續django學習之旅,以前咱們所作的Django練習前端都很是醜。這節咱們使用Bootstrap,頓時使醜陋的頁面變成白天鵝。html
安裝Bootstrap 前端
Bootstrap是什麼?python
Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合做開發,是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範,它便是由動態CSS語言Less寫成。git
django-bootstrap-toolkitgithub
django-bootstrap-toolkit應用能夠讓Django非容易的集成Bootstrap。django
安裝django-bootstrap-toolkitbootstrap
>pip install django-bootstrap-toolkit
運行bootstrap例子 瀏覽器
克隆django-bootstrap-toolkit 項目session
https://github.com/dyve/django-bootstrap-toolkitapp
$ 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 TemplateView urlpatterns = 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, EmptyPage from bootstrap_toolkit.widgets import BootstrapUneditableInput from .forms import TestForm, TestModelForm, TestInlineForm, WidgetsForm, FormSetInlineForm def 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模板頁面較多,我就不一一列出了。不過,如今最興奮的就是去修改上面的文字,讓其看起來更像咱們本身的「網站」。
在後面的學習中,咱們將以此爲基礎進行。