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標簽，完成對於之前信息的記錄。