python測試開發django-41.crispy-forms設計標籤式導航菜單（TabHolder）

前言

xadmin的詳情頁面主要是用form_layout佈局，學會了徹底能夠不用寫html代碼，也能作出很好看的頁面。
xadmin的html頁面是用的Bootstrap3框架設計的，layout佈局用到的是django-crispy-forms框架，本篇詳細講下django-crispy-forms的官方文檔案例

django-crispy-forms

當咱們使用xadmin後臺的時候，在INSTALLED_APPS裏面同時添加了xadmin和crispy_forms這2個app，xadmin已經知道了，但不知道crispy_forms這個app是幹什麼的

能夠在百度上搜到crispy_forms，順藤摸瓜找到django-crispy-forms的github地址https://github.com/django-crispy-forms/django-crispy-forms

能夠看出它是基於django-uni-form這個框架開發的，專門用於詳情頁面的佈局設計，完美的支持Bootstrap前端框架。
它的設計理念是Forms have never been this crispy

更多功能介紹，查看官方文檔https://django-crispy-forms.readthedocs.io/en/latest/

Tab＆TabHolder

使用TabHolder 能夠快速設計一個標籤式導航菜單，不一樣的標籤用Tab分開，Tab裏面第一個參數是標籤的名稱，一個Tab能夠設計多個Field。

TabHolder （ Tab （'First Tab' ， 'field_name_1' ， Div （'field_name_2' ） ）， Tab （'Second Tab' ， Field （'field_name_3' ， css_class = 'extra' ） ） ）

標籤式導航菜單

接着前面這篇python測試開發django-39.xadmin詳情頁面佈局form_layout頁面設計的基礎上，添加一個標籤式導航菜單案例。
關於導航菜單的更多的介紹能夠看菜鳥教程地址http://www.runoob.com/bootstrap/bootstrap-navigation-elements.html

# adminx.py import xadmin from .models import ArticleDetail from xadmin.layout import Main, TabHolder, Tab, Fieldset, Row, Col, AppendedText, Side, Field class MoreActicl(object): list_display = ['title', 'body', 'auth'] # layout佈局 form_layout = ( Fieldset(u'', Row('title', 'auth'), # Row 表示將裏面的字段做爲一行顯示 Row('classify'), css_class = 'unsort', ), Fieldset(('正文內容'), # Fieldset第一個參數表示區塊名稱 'body', css_class = 'unsort', ), TabHolder( Tab('body-raw', Field('title', css_class="extra"), Field('body'), css_class = 'unsort' ), Tab('body-json', Field('body',) ), css_class = 'unsort', ) ) xadmin.site.register(ArticleDetail, MoreActicl) 

打開以後頁面顯示效果以下圖

css_class="extra"能夠將輸入框佔一整行