Pycharm上Django的使用 Day13
設置應用程序的樣式html
爲設置樣式，咱們將使用Bootstrap庫web
1.應用程序django-bootstrap3django
1>安裝django-bootstrap3bootstrap
在活動的虛擬環境中執行命令:pip install django-bootstrap3 來進行安裝瀏覽器
2>在settings.py的INSTALLED_APPS中添加以下代碼，在項目中包含應用程序django-bootstrap3app
3>讓django-bootstrap3包含jQuery，這是一個JavaScript庫，讓你可以使用Bootstrap模板提供的一些交互式元素網站
2.使用Bootstrap來設置項目web_app的樣式，並修改base.html3d
1>定義HTML頭部orm
刪除base.html的所有代碼，並從新編寫htm
1處加載了django-bootstrap3中的模板標籤集
接下來，咱們將這個文件聲明爲使用英語(3處)編寫的HTML文件(2處)
HTML文件分爲兩個主要部分:頭部(head)和主體(body)；在這個文件中，頭部始於4處。HTML文件的頭部不包含任何內容:它只是將正確顯示頁面所需的信息告訴瀏覽器
5處表示咱們定義的一個標題欄
6處咱們使用了django-bootstrap3的一個自定義模板標籤，它讓Django包含全部的Bootstrap樣式文件，接下來的標籤啓用你可能在頁面中使用的全部交互式行爲，如可摺疊的導航欄
7處爲結束標籤</head>
2>定義導航欄
第一個元素爲起始標籤<body>。HTML文件的主體包含用戶將在頁面上看到的內容。
1處是一個<nav>元素，表示頁面的導航鏈接部分，對於這個元素內的全部內容，都將根據選擇器(selector)navbar、navbar-default和navbar-static-top定義的Bootstrap樣式規則來設置樣式。選擇器決定了特定樣式規則將應用於頁面上的哪些元素
2處定義了一個按鈕，它將在瀏覽器窗口太窄、沒法水平顯示整個導航欄時顯示出來。若是用戶單擊這個按鈕，將出現一個下拉列表，其中包含全部的導航元素。在用戶縮小瀏覽器窗口或在屏幕較小的移動設備上顯示網站時，collapse會使導航欄摺疊起來
在3處，在導航欄的最左邊顯示項目名，並將其設置爲到主頁的連接，由於它將出如今這個項目的每一個頁面中
在4處，定義了一組讓用戶可以在網站中導航的連接。導航欄其實就是一個以<ul>打頭的列表(5處)，其中每一個連接都是一個列表項(<li>)
在7處，添加了第二個導航連接列表，這裏使用的選擇器爲navbar-right。選擇器navbar-right設置一組連接的樣式，使其出如今導航欄右邊--登陸連接和註冊連接一般出如今這裏
8處表示結束包含導航欄的元素
3>定義頁面的主要部分
1處是一個<div>起始標籤，其class屬性爲container。
div是網頁的一部分，可用於任何目的，並可經過邊框、元素周圍的空間、內容和邊框之間的間距、背景色和其餘樣式規則來設置其樣式。
這個div是一個容器，其中包含兩個元素：一個新增的名爲header的塊(2處)，以及content塊(3處)
其class屬性值page-header將一系列樣式應用於這個塊，content塊是一個獨立的div，未使用class屬性指定樣式
3.設置主頁樣式
1處告訴Django，咱們要定義header塊包含的內容。
在一個jumbotron元素中(2處)，放置了一條簡短的標語，讓首次訪問者大體知道這個app是幹什麼用的
3處，添加了一些文本，作了更詳細的說明
4.設置登陸頁面樣式
1處表示在這個模板中加載了bootstrap3模板標籤
2處定義了header塊，描述了這個頁面是作什麼用的，咱們從以前模板中刪除了{% if forms.errors %}，覺得django-bootstrap3會自動管理表單錯誤
3處添加了屬性class = "form"，並在4處使用模板標籤{% bootstrap_form %}來顯示錶單，這個標籤替換了咱們以前使用的標籤{{ form.as_p }}
模板標籤{% bootstrap_form %}將Bootstrap樣式規則應用於各個表單元素
5處將Bootstrap樣式應用於按鈕
5.運行manage.py
能夠看到主頁和登陸界面都發生了變化
調整至小窗口後，導航欄將變成一個按鈕
- 1. Pycharm上Django的使用 Day2
- 2. Pycharm上Django的使用 Day4
- 3. Pycharm上Django的使用 Day8
- 4. Pycharm上Django的使用 Day14
- 5. Pycharm上Django的使用 Day7
- 6. Pycharm上Django的使用 Day5
- 7. Pycharm上Django的使用 Day3
- 8. Pycharm上Django的使用 Day10
- 9. Pycharm上Django的使用 Day11
- 10. Pycharm上Django的使用 Day6
- 更多相關文章...
- • 服務器上的 XML - XML 教程
- • TortoiseSVN 使用教程 - SVN 教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
-
每一个你不满意的现在，都有一个你没有努力的曾经。