（十二）Flask 學習 —— 換裝

時間 2019-11-06

標籤十二 flask 學習換裝欄目 Python 简体版

原文原文鏈接

換裝

簡介

若是你一直追隨着 microblog 應用程序，你可能發現咱們並無在應用程序的外觀上花不少的時間。到目前爲止，咱們使用的模板是基本的，而且沒有風格而言。這也是有幫助的，當咱們編碼的時候，咱們不想爲編寫好看的 HTML 而分心。css

這篇文章將會與之前的有所不一樣，由於寫好看的 HTML/CSS 是一個巨大的話題，超出這一系列的預期範圍。這裏不會有任何 HTML 或 CSS 的細節，咱們將只討論基本的指導方針和思路。html

咱們該怎麼作？

雖然咱們能夠認爲編碼是很難的，可是這些痛苦比不上那些網頁設計師，他們必須編寫好的而且具備一致性的模板以適應各類瀏覽器。在現在的社會中，他們不單單須要使得設計在常規的瀏覽器上看起來不錯，而且還須要在平板電腦、智能手機上的瀏覽器上顯得好看。python

不幸地是，學習 HTML, CSS 以及 Javascript，而且清楚它們在每一種瀏覽器上的特性是一個深不見底的任務。咱們不可能有不少的時間去作。咱們只但願少投入些精力讓咱們的應用程序好看。jquery

所以怎麼樣才能在這麼多限制下完成咱們的 microblog 界面？git

Bootstrap 簡介

咱們在 Twitter 裏的好朋友發佈了一個開源 web 框架，叫作 Bootstrap，它可能就是咱們的救命稻草。github

Bootstrap 是最多見的網頁類型的 CSS 和 Javascript 工具的集合。若是你想要看用這個框架設計的網頁，請看這些例子。web

Bootstrap 擅長以下這些東西:flask

在全部的主流瀏覽器上看起來同樣bootstrap
臺式機，平板電腦和手機的屏幕大小不一的處理瀏覽器
可定製的佈局
多風格的導航欄
多風格的表單
其它不少，不少...

用 Bootstrap 裝點 microblog

在咱們把 Bootstrap 添加到應用程序以前，咱們必須安裝 Bootstrap CSS，Javascript 以及圖片文件到咱們的網頁服務器能夠找到的地方。

在 Flask 中，app/static 文件夾就是這些常規文件所在地。當一個 URL 中有一個 /static 後綴的話，網頁服務器就知道到這個文件夾中尋找文件。

例如，若是咱們存儲一個名爲 image.png 文件在 /app/static 中，咱們可以在模板中顯示帶有以下標籤的圖片:

<img src="/static/image.png" />

咱們將會根據以下結構來安裝 Bootstrap 框架:

/app     
    /static         
        /css             
                    bootstrap.min.css             bootstrap-responsive.min.css         
        /img             
                    glyphicons-halflings.png             glyphicons-halflings-white.png         
        /js             
                    bootstrap.min.js

根據說明，咱們必須在基礎模板中的 head 部分加入以下內容:

<!DOCTYPE html> 
<html lang="en">   
<head>     

    ...     
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">     
    <link href="/static/css/bootstrap-responsive.min.css" rel="stylesheet">     
    <script src="http://code.jquery.com/jquery-latest.js"></script>     
    <script src="/static/js/bootstrap.min.js"></script>     
    <meta name="viewport" content="width=device-width, initial-scale=1.0">     
    ...   
    
</head>
</html>

接下來咱們須要對模板作的改變有: