本節內容
使用前端模版
登錄認證頁面
開發動態菜單
自己開發一個admin系統
使用前端模版
終於可以開始寫代碼了， 前面我們學習BBS和WEB聊天室項目時，都是直接用bootstrap + jquery 搞起， 但由於設計水平有限，我們做出來的東西還是太丑了，在這個看臉的時代，賣相不好，影響心情，怎么辦？哈，其實網上有很多已經基於bootstrap + juqery封裝好的前端模版，做的高大上吊炸天，我自己寫正式項目時一般都直接去買個好看的模版改改就能用， 什么？要花錢？啊，是呀，好東西當然要花錢呀, 不過，你如果實在不想花錢，網上也能找一下免費的，但我覺得不好看，我就是想花點錢支持正版。
使用專業前端模版
前端模版兜售網站：https://wrapbootstrap.com/
講真，我已經從這里買了好幾套啦，見到好看的模版就喜歡的不得了想買下來。在這里為了讓大家學習起見，我為我們們的crm買了這個https://wrapbootstrap.com/theme/nifty-responsive-admin-template-WB0048JF7 ，20美金，你也可以買，當然考慮到只是讓大家學習一下這個項目，所以我在網上共享了這個模版，但僅供學習使用，用完請立刻刪除（我可不想背負傳播盜版的罪名），
臨時下載地址:
下載並解壓后，會有3個目錄，分別是“Documentation”, “get-started”, “template”, 進入get-started目錄， 雙擊打開index.html文件，選擇樣式Expanded Navigation， cool,我們就用這個做基礎模版啦。
接下來我們配置使這個模版可以django中使用，相信經過前面2個項目的學習，這點難不倒你。
配置templates 和statics靜態文件目錄, (新版django1.8后，templates目錄都會自動在settings.py中配置並創建，所以不用管),只需在項目PerfectCRM目錄下創建statics目錄即可
STATICFILES_DIRS = ( "%s/%s" %(BASE_DIR, "statics"), )
1. 在模版get-started目錄下找到文件getstarted-expanded-navigation.html，把它copy到你項目的templates目錄下，並改名為base.html， 這個base.html只存基本的css, js引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PerfectCRM|老男孩教育</title> <!--STYLESHEET--> <!--=================================================--> <!--Open Sans Font [ OPTIONAL ] --> <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin" rel="stylesheet"> <!--Bootstrap Stylesheet [ REQUIRED ]--> <link href="/static/css/bootstrap.min.css" rel="stylesheet"> <!--Nifty Stylesheet [ REQUIRED ]--> <link href="/static/css/nifty.min.css" rel="stylesheet"> <link href="/static/css/custom.css" rel="stylesheet"> <!--Font Awesome [ OPTIONAL ]--> <link href="/static/css/font-awesome.min.css" rel="stylesheet"> <link href="/static/plugins/dropzone/dropzone.css" rel="stylesheet"> {% block header-extra-recourses %}{% endblock %} <!--SCRIPT--> <!--=================================================--> <!--Page Load Progress Bar [ OPTIONAL ]--> <link href="/static/css/pace.min.css" rel="stylesheet"> <script src="/static/js/pace.min.js"></script> </head> <body> {% block body %} you own body data.... {% endblock %} <!--JAVASCRIPT--> <!--=================================================--> <!--jQuery [ REQUIRED ]--> <script src="/static/js/jquery-2.1.1.min.js"></script> <!--BootstrapJS [ RECOMMENDED ]--> <script src="/static/js/bootstrap.min.js"></script> <!--Fast Click [ OPTIONAL ]--> <script src="/static/js/fastclick.min.js"></script> <!--Nifty Admin [ RECOMMENDED ]--> <script src="/static/js/nifty.min.js"></script> <script src="/static/plugins/dropzone/dropzone_latest.js"></script> <script> $(document).ready(function () { if ("{{ active_url }}"){ var active_url = "{{ active_url }}" ; }else { var active_url = "{{ request.path }}" ; } var active_menu = $("#mainnav-menu ").find("a[href='"+ active_url +"']"); active_menu.parent().addClass("active-link"); if (active_menu.parent().parent().hasClass("collapse")){ active_menu.parent().parent().addClass("in"); } });//end doc ready </script> {% block bottom-js %} {% endblock %} {% block extra-js %}{% endblock %} </body> </html>
2. 創建一個index.html, 引用base.html,這個文件里定義頁面的基本布局，每個子頁面以后都 繼承這個index.html
{% extends 'base.html' %} {% load custom_tags %} {% block body %} <div id="container" class="effect mainnav-lg"> <!--NAVBAR--> <!--===================================================--> <header id="navbar"> <div id="navbar-container" class="boxed"> <!--Brand logo & name--> <!--================================--> <div class="navbar-header"> <a href="index.html" class="navbar-brand"> <img src="/static/img/logo.png" alt="Nifty Logo" class="brand-icon"> <div class="brand-title"> <span class="brand-text">Oldboy CRM</span> </div> </a> </div> <!--================================--> <!--End brand logo & name--> <!--Navbar Dropdown--> <!--================================--> <div class="navbar-content clearfix"> <ul class="nav navbar-top-links pull-left"> <!--Navigation toogle button--> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <li class="tgl-menu-btn"> <a class="mainnav-toggle" href="#"> <i class="fa fa-navicon fa-lg"></i> </a> </li> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <!--End Navigation toogle button--> <!--Messages Dropdown--> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-envelope fa-lg"></i> <span class="badge badge-header badge-warning">9</span> </a> <!--Message dropdown menu--> <div class="dropdown-menu dropdown-menu-md with-arrow"> <div class="pad-all bord-btm"> <p class="text-lg text-muted text-thin mar-no">You have 3 messages.</p> </div> <div class="nano scrollable"> <div class="nano-content"> <ul class="head-list"> <!-- Dropdown list--> <li> <a href="#" class="media"> <div class="media-left"> <img src="/static/img/av2.png" alt="Profile Picture" class="img-circle img-sm"> </div> <div class="media-body"> <div class="text-nowrap">Andy sent you a message</div> <small class="text-muted">15 minutes ago</small> </div> </a> </li> <!-- Dropdown list--> <li> <a href="#" class="media"> <div class="media-left"> <img src="/static/img/av4.png" alt="Profile Picture" class="img-circle img-sm"> </div> <div class="media-body"> <div class="text-nowrap">Lucy sent you a message</div> <small class="text-muted">30 minutes ago</small> </div> </a> </li> </ul> </div> </div> <!--Dropdown footer--> <div class="pad-all bord-top"> <a href="#" class="btn-link text-dark box-block"> <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Messages </a> </div> </div> </li> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <!--End message dropdown--> <!--Notification dropdown--> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <li class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-bell fa-lg"></i> <span class="badge badge-header badge-danger">5</span> </a> <!--Notification dropdown menu--> <div class="dropdown-menu dropdown-menu-md with-arrow"> <div class="pad-all bord-btm"> <p class="text-lg text-muted text-thin mar-no">You have 3 messages.</p> </div> <div class="nano scrollable"> <div class="nano-content"> <ul class="head-list"> <!-- Dropdown list--> <li> <a href="#"> <div class="clearfix"> <p class="pull-left">Progressbar</p> <p class="pull-right">70%</p> </div> <div class="progress progress-sm"> <div style="width: 70%;" class="progress-bar"> <span class="sr-only">70% Complete</span> </div> </div> </a> </li> <!-- Dropdown list--> <li> <a href="#" class="media"> <div class="media-left"> <span class="icon-wrap icon-circle bg-primary"> <i class="fa fa-comment fa-lg"></i> </span> </div> <div class="media-body"> <div class="text-nowrap">Circle Icon</div> <small class="text-muted">15 minutes ago</small> </div> </a> </li> <!-- Dropdown list--> <li> <a href="#" class="media"> <span class="badge badge-success pull-right">90%</span> <div class="media-left"> <span class="icon-wrap icon-circle bg-danger"> <i class="fa fa-hdd-o fa-lg"></i> </span> </div> <div class="media-body"> <div class="text-nowrap">Circle icon with badge</div> <small class="text-muted">50 minutes ago</small> </div> </a> </li> <!-- Dropdown list--> <li> <a href="#" class="media"> <div class="media-left"> <span class="icon-wrap bg-info"> <i class="fa fa-file-word-o fa-lg"></i> </span> </div> <div class="media-body"> <div class="text-nowrap">Square Icon</div> <small class="text-muted">Last Update 8 hours ago</small> </div> </a> </li> <!-- Dropdown list--> <li> <a href="#" class="media"> <span class="label label-danger pull-right">New</span> <div class="media-left"> <span class="icon-wrap bg-purple"> <i class="fa fa-comment fa-lg"></i> </span> </div> <div class="media-body"> <div class="text-nowrap">Square icon with label</div> <small class="text-muted">Last Update 8 hours ago</small> </div> </a> </li> </ul> </div> </div> <!--Dropdown footer--> <div class="pad-all bord-top"> <a href="#" class="btn-link text-dark box-block"> <i class="fa fa-angle-right fa-lg pull-right"></i>Show All Notifications </a> </div> </div> </li> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <!--End notifications dropdown--> <!--Mega dropdown--> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <li class="mega-dropdown"> <a href="#" class="mega-dropdown-toggle"> <i class="fa fa-th-large fa-lg"></i> </a> <div class="dropdown-menu mega-dropdown-menu"> <div class="clearfix"> <div class="col-sm-12 col-md-3"> <!--Mega menu widget--> <div class="text-center bg-purple pad-all"> <h3 class="text-thin mar-no">Weekend shopping</h3> <div class="pad-ver box-inline"> <span class="icon-wrap icon-wrap-lg icon-circle bg-trans-light"> <i class="fa fa-shopping-cart fa-4x"></i> </span> </div> <p class="pad-btm"> Members get <span class="text-lg text-bold">50%</span> more points. Lorem ipsum dolor sit amet! </p> <a href="#" class="btn btn-purple">Learn More...</a> </div> </div> <div class="col-sm-4 col-md-3"> <!--Mega menu list--> <ul class="list-unstyled"> <li class="dropdown-header">Pages</li> <li><a href="#">Profile</a></li> <li><a href="#">Search Result</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">Sreen Lock</a></li> <li><a href="#" class="disabled">Disabled</a></li> <li class="divider"></li> <li class="dropdown-header">Icons</li> <li><a href="#"><span class="pull-right badge badge-purple">479</span> Font Awesome</a></li> <li><a href="#">Skycons</a></li> </ul> </div> <div class="col-sm-4 col-md-3"> <!--Mega menu list--> <ul class="list-unstyled"> <li class="dropdown-header">Mailbox</li> <li><a href="#"><span class="pull-right label label-danger">Hot</span>Indox</a></li> <li><a href="#">Read Message</a></li> <li><a href="#">Compose</a></li> <li class="divider"></li> <li class="dropdown-header">Featured</li> <li><a href="#">Smart navigation</a></li> <li><a href="#"><span class="pull-right badge badge-success">6</span>Exclusive plugins</a></li> <li><a href="#">Lot of themes</a></li> <li><a href="#">Transition effects</a></li> </ul> </div> <div class="col-sm-4 col-md-3"> <!--Mega menu list--> <ul class="list-unstyled"> <li class="dropdown-header">Components</li> <li><a href="#">Tables</a></li> <li><a href="#">Charts</a></li> <li><a href="#">Forms</a></li> <li class="divider"></li> <li> <form role="form" class="form"> <div class="form-group"> <label class="dropdown-header" for="demo-megamenu-input">Newsletter</label> <input id="demo-megamenu-input" type="email" placeholder="Enter email" class="form-control"> </div> <button class="btn btn-primary btn-block" type="submit">Submit</button> </form> </li> </ul> </div> </div> </div> </li> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <!--End mega dropdown--> </ul> <ul class="nav navbar-top-links pull-right"> <!--Language selector--> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <li class="dropdown"> <a class="lang-selector dropdown-toggle" href="#" data-toggle="dropdown"> <span class="lang-selected"> <img class="lang-flag" src="/static/img/flags/united-kingdom.png" alt="English"> <span class="lang-id">EN</span> <span class="lang-name">English</span> </span> </a> <!--Language selector menu--> <ul class="head-list dropdown-menu with-arrow"> <li> <!--English--> <a href="#" class="active"> <img class="lang-flag" src="/static/img/flags/united-kingdom.png" alt="English"> <span class="lang-id">EN</span> <span class="lang-name">English</span> </a> </li> <li> <!--France--> <a href="#"> <img class="lang-flag" src="/static/img/flags/france.png" alt="France"> <span class="lang-id">FR</span> <span class="lang-name">Français</span> </a> </li> <li> <!--Germany--> <a href="#"> <img class="lang-flag" src="/static/img/flags/germany.png" alt="Germany"> <span class="lang-id">DE</span> <span class="lang-name">Deutsch</span> </a> </li> <li> <!--Italy--> <a href="#"> <img class="lang-flag" src="/static/img/flags/italy.png" alt="Italy"> <span class="lang-id">IT</span> <span class="lang-name">Italiano</span> </a> </li> <li> <!--Spain--> <a href="#"> <img class="lang-flag" src="/static/img/flags/spain.png" alt="Spain"> <span class="lang-id">ES</span> <span class="lang-name">Español</span> </a> </li> </ul> </li> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <!--End language selector--> <!--User dropdown--> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <li id="dropdown-user" class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right"> <span class="pull-right"> <img class="img-circle img-user media-object" src="/static/img/av1.png" alt="Profile Picture"> </span> <div class="username hidden-xs">{{ request.user.name }}</div> </a> <div class="dropdown-menu dropdown-menu-md dropdown-menu-right with-arrow panel-default"> <!-- Dropdown heading --> <div class="pad-all bord-btm"> <p class="text-lg text-muted text-thin mar-btm">750Gb of 1,000Gb Used</p> <div class="progress progress-sm"> <div class="progress-bar" style="width: 70%;"> <span class="sr-only">70%</span> </div> </div> </div> <!-- User dropdown menu --> <ul class="head-list"> <li> <a href="#"> <i class="fa fa-user fa-fw fa-lg"></i> Profile </a> </li> <li> <a href="#"> <span class="badge badge-danger pull-right">9</span> <i class="fa fa-envelope fa-fw fa-lg"></i> Messages </a> </li> <li> <a href="#"> <span class="label label-success pull-right">New</span> <i class="fa fa-gear fa-fw fa-lg"></i> Settings </a> </li> </ul> <!-- Dropdown footer --> <div class="pad-all text-right"> <a href="{% url 'logout' %}" class="btn btn-primary"> <i class="fa fa-sign-out fa-fw"></i> Logout </a> </div> </div> </li> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <!--End user dropdown--> </ul> </div> <!--================================--> <!--End Navbar Dropdown--> </div> </header> <!--===================================================--> <!--END NAVBAR--> <div class="boxed"> <!--CONTENT CONTAINER--> <!--===================================================--> <div id="content-container"> <!--Page Title--> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <div id="page-title"> {% block "page-title" %} <h1 class="page-header text-overflow">{% block page-title-text %}你的頁面標題{% endblock %}</h1> <!--Searchbox--> {% block searchbox %} <div class="searchbox"> <div class="input-group custom-search-form"> <input type="text" class="form-control" placeholder="Search.."> <span class="input-group-btn"> <button class="text-muted" type="button"><i class="fa fa-search"></i></button> </span> </div> </div> {% endblock %} {% endblock %} </div> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <!--End page title--> <!--Breadcrumb--> {% block breadcrumb %} <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> {% endblock %} <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <!--End breadcrumb--> <!--Page content--> <!--===================================================--> <div id="page-content"> {% block page-content %} <!-- QUICK TIPS --> <!-- ==================================================================== --> <h3>Your content here...</h3> <br> <a href="index.html" class="btn btn-dark">Back</a> <br><br><br> <h3>Quick Tips</h3> <p>You may remove all ID or Class names which contain <code>demo-</code>, they are only used for demonstration.</p> <br> <h4>Navigation</h4> <div class="table-responsive"> <table class="table"> <tbody> <tr> <td style="width:70ex">Expanded the navigation by default</td> <td>Add <code>.mainnav-lg</code> to the <code>#container</code>.</td> </tr> <tr> <td>Fixed navigation</td> <td>Add <code>.mainnav-fixed</code> to the <code>#container</code>.</td> </tr> <tr> <td>Create a ToggleButton for navigation</td> <td>Add <code>.mainnav-toggle</code> to the button.</td> </tr> <tr> <td></td> <td> <button class="btn btn-lg btn-primary mainnav-toggle">Toggle Navigation</button> </td> </tr> </tbody> </table> </div> <h4>Aside</h4> <div class="table-responsive"> <table class="table"> <tbody> <tr> <td style="width:70ex">Make Aside visible by default</td> <td>Add <code>.aside-in</code> to the <code>#container</code>.</td> </tr> <tr> <td>Fixed aside</td> <td>Add <code>.aside-fixed</code> to the <code>#container</code>.</td> </tr> <tr> <td>Aside on the left side</td> <td>Add <code>.aside-left</code> to the <code>#container</code>.</td> </tr> <tr> <td>Use the bright color theme</td> <td>Add <code>.aside-bright</code> to the <code>#container</code>.</td> </tr> <tr> <td>Create a ToggleButton for aside</td> <td>Add <code>.aside-toggle</code> to the button.</td> </tr> <tr> <td></td> <td> <button class="btn btn-success btn-lg aside-toggle">Toggle Aside</button> </td> </tr> </tbody> </table> </div> <h4>Navbar</h4> <div class="table-responsive"> <table class="table"> <tbody> <tr> <td style="width:70ex">Fixed navbar</td> <td>Add <code>.navbar-fixed</code> to the <code>#container</code>.</td> </tr> </tbody> </table> </div> <h4>Footer</h4> <div class="table-responsive"> <table class="table"> <tbody> <tr> <td style="width:70ex">Fixed footer</td> <td>Add <code>.footer-fixed</code> to the <code>#container</code>.</td> </tr> </tbody> </table> </div> <h4>Color Themes</h4> <div class="table-responsive"> <table class="table"> <tbody> <tr> <td style="width:70ex">Apply a different color theme</td> <td>You can change whole color theme of your website by adding a color theme stylesheet into the <code><head></code>.</td> </tr> <tr> <td></td> <td><pre><head><br> ...<br> <link href="path-to-the-color-theme.css" rel="stylesheet"><br></head></pre></td> </tr> </tbody> </table> </div> <h4>Animation</h4> <div class="table-responsive"> <table class="table"> <tbody> <tr> <td style="width:70ex">Remove animation</td> <td>Remove the class <code>.effect</code> from <code>#container</code>.</td> </tr> <tr> <td>Add different slide transitions to the Navigation and Aside</td> <td> Add <code>.effect</code> to the <code>#container</code> and then combined with the class name of the transition function. <br> <br> <table> <thead> <tr> <th style="width: 250px;">Transition function</th> <th>Class name</th> </tr> </thead> <tbody> <tr> <td>easeInQuart</td> <td><code>.easeInQuart</code></td> </tr> <tr> <td>easeOutQuart</td> <td><code>.easeOutQuart</code></td> </tr> <tr> <td>easeInBack</td> <td><code>.easeInBack</code></td> </tr> <tr> <td>easeOutBack</td> <td><code>.easeOutBack</code></td> </tr> <tr> <td>easeInOutBack</td> <td><code>.easeInOutBack</code></td> </tr> <tr> <td>steps</td> <td><code>.steps</code></td> </tr> <tr> <td>jumping</td> <td><code>.jumping</code></td> </tr> <tr> <td>rubber</td> <td><code>.rubber</code></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </div> <!-- ==================================================================== --> <!-- END QUICK TIPS --> {% endblock %} </div> <!--===================================================--> <!--End page content--> </div> <!--===================================================--> <!--END CONTENT CONTAINER--> <!--MAIN NAVIGATION--> <!--===================================================--> <nav id="mainnav-container"> <div id="mainnav"> <!--Shortcut buttons--> <!--================================--> <div id="mainnav-shortcut"> <ul class="list-unstyled"> <li class="col-xs-4" data-content="Shortcut 1"> <a class="shortcut-grid" href="#"> <i class="fa fa-car"></i> </a> </li> <li class="col-xs-4" data-content="Shortcut 2"> <a class="shortcut-grid" href="#"> <i class="fa fa-taxi"></i> </a> </li> <li class="col-xs-4" data-content="Shortcut 3"> <a class="shortcut-grid" href="#"> <i class="fa fa-bus"></i> </a> </li> </ul> </div> <!--================================--> <!--End shortcut buttons--> <!--Menu--> <!--================================--> <div id="mainnav-menu-wrap"> <div class="nano"> <div class="nano-content"> {% block "left-side-menu" %} <ul id="mainnav-menu" class="list-group"> <!--Category name--> <li class="list-header">Link List</li> {% load_menus request as menus %} {% for m in menus %} {% if not m.sub_menus.select_related %} <li > <a href="{% if m.url_type == 0 %}{% url m.url_name %}{% else %}{{ m.url_name }}{% endif %}"> <i class="fa fa-plane"></i> <span class="menu-title">{{ m.name }}</span> </a> </li> {% else %} <li class=""> <a href="{% if m.url_type == 0 %}{% url m.url_name %}{% else %}{{ m.url_name }}{% endif %}"> <i class="fa fa-th"></i> <span class="menu-title">{{ m.name }}</span> <i class="arrow"></i> </a> <!--Submenu--> <ul class="collapse"> {% for sub_menu in m.sub_menus.select_related %} <li><a href="{% if sub_menu.url_type == 0 %}{% url sub_menu.url_name %}{% else %}{{ sub_menu.url_name }}{% endif %}">{{ sub_menu.name }}</a></li> {% endfor %} </ul> </li> {% endif %} {% endfor %} <!--Menu list item--> </ul> {% endblock %} </div> </div> </div> <!--================================--> <!--End menu--> </div> </nav> <!--===================================================--> <!--END MAIN NAVIGATION--> <!--ASIDE--> <!--===================================================--> <aside id="aside-container"> <div id="aside"> <div class="nano"> <div class="nano-content"> <!--Nav tabs--> <!--================================--> <ul class="nav nav-tabs nav-justified"> <li class="active"> <a href="#demo-asd-tab-1" data-toggle="tab"> <i class="fa fa-comments"></i> <span class="badge badge-purple">7</span> </a> </li> <li> <a href="#demo-asd-tab-2" data-toggle="tab"> <i class="fa fa-info-circle"></i> </a> </li> <li> <a href="#demo-asd-tab-3" data-toggle="tab"> <i class="fa fa-wrench"></i> </a> </li> <li> <a href="#demo-asd-tab-4" data-toggle="tab"> <i class="fa fa-shield"></i> <span class="label label-success">New</span> </a> </li> </ul> <!--================================--> <!--End nav tabs--> <!-- Tabs Content --> <!--================================--> <div class="tab-content"> <!--First tab--> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <div class="tab-pane fade in active" id="demo-asd-tab-1"> <h4 class="pad-hor text-thin"> First tab </h4> <div class="pad-all"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> </div> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <!--End first tab--> <!--Second tab--> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <div class="tab-pane fade" id="demo-asd-tab-2"> <h4 class="pad-hor text-thin"> Second tab </h4> <div class="pad-all"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> </div> <!--End second tab--> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <!--Third tab--> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <div class="tab-pane fade" id="demo-asd-tab-3"> <h4 class="pad-hor text-thin"> Third tab </h4> <div class="pad-all"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> </div> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <!--Third tab--> <!--Fourth tab--> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <div class="tab-pane fade" id="demo-asd-tab-4"> <h4 class="pad-hor text-thin"> Fourth tab </h4> <div class="pad-all"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </div> </div> <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~--> <!--Third tab (Settings)--> </div> </div> </div> </div> </aside> <!--===================================================--> <!--END ASIDE--> </div> <!-- FOOTER --> <!--===================================================--> <footer id="footer"> <!-- Visible when footer positions are fixed --> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <div class="show-fixed pull-right"> <ul class="footer-list list-inline"> <li> <p class="text-sm">SEO Proggres</p> <div class="progress progress-sm progress-light-base"> <div style="width: 80%" class="progress-bar progress-bar-danger"></div> </div> </li> <li> <p class="text-sm">Online Tutorial</p> <div class="progress progress-sm progress-light-base"> <div style="width: 80%" class="progress-bar progress-bar-primary"></div> </div> </li> <li> <button class="btn btn-sm btn-dark btn-active-success">Checkout</button> </li> </ul> </div> <!-- Visible when footer positions are static --> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <div class="hide-fixed pull-right pad-rgt">Currently v2.2.2</div> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <!-- Remove the class name "show-fixed" and "hide-fixed" to make the content always appears. --> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <p class="pad-lft">© 2015 Your Company</p> </footer> <!--===================================================--> <!-- END FOOTER --> <!-- SCROLL TOP BUTTON --> <!--===================================================--> <button id="scroll-top" class="btn"><i class="fa fa-chevron-up"></i></button> <!--===================================================--> </div> <!--===================================================--> <!-- END OF CONTAINER --> {% endblock %}
注意，這個頁面里定義了動態菜單，為什么在這里定義呢，因為每個子頁面的都 要繼承這個index.html,每個子頁面的菜單就不用重新寫了。