Parse CloudCode實作----長沙海報展覽＋RWD

公司和長沙海報展做合作，我將海報資料介紹做成一個網站，理念跟上一篇介紹的一樣，適用anyimg做的延伸

首先第一個是home.ejs，延伸了anyimg的觀念，將table中的圖片抓取出來並且顯示，以四個為一單位，做響應式的網頁設計

其實現在有很多library都有支援responsive，responsive就是可以針對使用者所持的裝置來改變網頁的顯示結構，因為有人用手機有人用平板，不能顯示的圖片都一樣大小，那拿手機的人要看啥.......所以這個設計很方便很實用，因為現在更多人拿手機來看網頁了。

在這裡我們使用的是boostrap的grid template

首先第一步我們要先將bootstrap的語法include進來，在這邊我習慣將需要include的library都放在layout，因為layout功能單純，比較不會搞混。
需要的有這些，include之後，我們就可以使用boostrap分配欄位的方法

基本的概念是這樣的，boosttrap將頁面的寬度分為12個欄位，如果想要將頁面全部佔滿，那我們就把這個div佔成12column，如果只想顯示出來佔頁面的一半就是佔6column，以此類推，

• 一列的總和需為 12 欄！！！！

下列這行為範例

col-sm-12這列表示小裝置，所以只要手機是最小裝置的bar，就會是滿版
col-xs-12中的 col-lg-12是最大的電腦，這些相關對應的裝置大小可以去boostrap的官方網站，那裡講解的很詳細也有很多練習實做的部分。


就像畫廊一樣，主頁每個點進去的圖片都可以看到




這個內容的資料存取是從js中的app.get去抓取id，然後將資料render回去給ejs，由ejs顯示出來

responsive web design，當我們將頁面拉進來的時候可以發現，剛剛是八張一行現在變成四張了，這就是會顯示在手機上的畫面

還可利用不同urll控制顯示內容，這裡利用 /n 只顯示文字內容














這種利用url去控制顯示內容的部分是在app.js裡面，我們使用不同的url去顯示不同的頁面

所以我們可以把原來的i改成n之後，就會顯示另外一個頁面了。