djngo快速實(shí)現(xiàn)--使用Bootstrap2014-09-28 18:04 by 蟲(chóng)師, 4253 閱讀, 5 評(píng)論, 收藏, 編輯繼續(xù)django學(xué)習(xí)之旅,之前我們所做的Django練習(xí)前端都非常丑。這節(jié)我們使用Bootstrap,頓時(shí)使丑陋的頁(yè)面變成白天鵝。
安裝Bootstrap
Bootstrap是什么? Bootstrap是Twitter推出的一個(gè)用于前端開(kāi)發(fā)的開(kāi)源工具包。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開(kāi)發(fā),是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范,它即是由動(dòng)態(tài)CSS語(yǔ)言Less寫(xiě)成。
django-bootstrap-toolkit django-bootstrap-toolkit應(yīng)用可以讓Django非容易的集成Bootstrap。
安裝django-bootstrap-toolkit
>pip install django-bootstrap-toolkit
運(yùn)行bootstrap例子
克隆django-bootstrap-toolkit 項(xiàng)目
https://github.com/dyve/django-bootstrap-toolkit
$ git clone git://github.com/dyve/django-bootstrap-toolkit.git 克隆下來(lái)的django-bootstrap-toolkit 項(xiàng)目自帶demo_project,現(xiàn)在我們可以直接運(yùn)行這個(gè)demo了。 進(jìn)入demo_project 目錄運(yùn)行: > python manage.py runserver
通過(guò)瀏覽器訪問(wèn):http://127.0.0.1:8000/
wa o !! cool 比我們之前的djngo例子好看多了。
預(yù)覽demo_project
來(lái)看一下這個(gè)項(xiàng)目的結(jié)構(gòu)吧!
通過(guò)前面多個(gè)django項(xiàng)目練習(xí),我們已經(jīng)對(duì)這個(gè)目錄結(jié)構(gòu)不陌生了。下面看看這個(gè)例子要特別注意的:
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則是我們當(dāng)前的項(xiàng)目。
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寫(xiě)了哪些中間邏輯:
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模板頁(yè)面較多,我就不一一列出了。不過(guò),現(xiàn)在最興奮的就是去修改上面的文字,讓其看起來(lái)更像我們自己的“網(wǎng)站”。
在后面的學(xué)習(xí)中,我們將以此為基礎(chǔ)進(jìn)行。
2
0
(請(qǐng)您對(duì)文章做出評(píng)價(jià))
Add your comment
|
|
|
來(lái)自: 天才白癡書(shū)館 > 《django》