Bootstrap開發前端 進階(優化及與後端結合接口)總結

Bootstrap開發前端 進階(優化與接口分析)           chang_jw

經過使用bootstrap3.3.7，html5, CSS3進行購票系統網站前端開發。

實現index，film. Cinema, certain，login, success頁面並可造成關聯性跳轉邏輯。

 

一，使用Google Fonts 插件進行字體優化

文字是網頁中很重要的組成部分。爲文字選擇一個合適的字體，可以更好的展示一個網站的個性，表達所要傳遞的信息。

對於font理解首先是從CSS中，如：

　　

瀏覽器自動按照順序，先查找ARIAL字體，找不到則找HELVETICA。還找不到，則找sans-serif(必定可以實現)完成文字渲染。

因爲各瀏覽器以及系統字體中所存在的是不一樣的，所以進行實現時需注意字體需特殊實現部分的多重字體要求實現。

 

爲什麼選用Google Fonts

Google fonts提供選中字體進行預覽實現，有三種字體連接方式：

<1>基本方式：

     

<2>@import方式：

     

<3>js方式：

經過添加動態腳本並執行來導入字體。

     

 

實現

      

選用<1>方式

      

 

 

二．佈局劃分

因爲在bootstrap中遵循極簡佈局風格，

 <1>footer格局：

將網站其餘信息直接在頁面下方進行footer四劃分佈局。

（主模塊劃分代碼以下：）

具體實現phone, fax等的href屬性

Sign-up郵件可發送屬性（輸入框內可輸入郵件地址）

Website-line中對外網站進行連接

     

    

 

 

#爲使得footer可以固定在頁面底部採起些措施：

　　(1)設置body的高度至少充滿整個屏幕，而且body做爲footer絕對定位的參考節點；

　　(2)設置main（footer前一個兄弟元素）的padding-bottom值大於等於footer的height值，以保證main的內容可以所有顯示出來而不被footer遮蓋；

　　(3)設置footer絕對定位，並設置height爲固定高度值。

必須在css文件中將main的padding-bottom值要等於或大於footer的height值

 

 

<2>側邊欄navigator佈局

使用role="navigation"標籤，進行主導航劃分。

並在電影院欄和電影欄中添加下屬連接，因爲組內實現最後未使用。

 

<3>link入包裝器和支持樣式

經過link入carousel 和sidewaze_columns.css 和 sidewaze_base.css來實現，使得頁面顯示可以更好。

對於頁面顯示，實現等待總體加載，對於自動高度要求進行初始化，對於包裝後各屬性進行要求。

<4>添加底部錨，進行跳轉

    爲解決第一頁面頁面太長的緣故。

 

<5>進行響應式佈局

 

三．對於後端進行接口

<1>採用post方法，進行提交

     

<2>Cinema頁面中在選擇各個電影院時進行form形式。Post方法，使得server經過調用database

　　(1)來直接對於我當前的空的按鈕的value值進行更改，則頁面上的按鈕顯示字樣就可以顯示每一個當前電影的名字。

　　(2)Server會對於每個action的路徑進行更改，如此處的

　　/cinema?id=wanda_Cinema

     

         # 對於film中一樣使用此方法，而且爲了後端更改方便，路徑做爲

/film?id=…

 

<3>在certain.html中使用Container-fluid,，Container-fluid,類的百分百寬度是指在固有的15px的padding前提下寬度老是當前下寬度當前視口的寬度。

　　（注：）關於container 和Container-fluid比較見

　　http://blog.csdn.net/sinat_27088253/article/details/50985432

　　一樣，對於certain中的提價，server進行數據更換並進行操做上的記錄。

　　對於用戶選擇的電影和電影院可以在頁面上顯示出來信息。

　　對於certain點擊肯定後，會跳轉到最後已生成訂單的頁面success,html，標誌已完成購買。

　　完成前端後端的結合。

 

四，login實現

在登陸中，使用checkbox標籤，完成對於以前信息的記錄。