bootstrap 切版

Willy Chang
3 min readNov 20, 2019

--

第一次使用bootstrap切版,雖然說是方便快速,但其實都幾乎是使用flex,甚至它設定好的CSS,第一次使用的情況下,改都改不動。

這是這次切版作業的首頁
雖然還是有差,而且導覽列的顏色改不動
作業
看起來還不錯(自我鼓勵XDDD)
作業
左邊圖片後面的黃色區塊沒做出來,還是有差
作業
小圖片好像是用Icons,但我還不太熟悉
作業
做不出互動,還要更努力才行,但這時RWD已經被我改壞了
作業
這邊沒有做隱藏效果了
作業,作業的背景圖片是3D的,很酷
我只能做出2D效果而已
作業
一樣備有加上觸摸效果
作業
幻燈片與右下角的Icons做不出來

心得:雖然是用bootstrap快速,因為它內建幫你做好了很多東西,但相對的他也幫你增加了很多CSS與Class,對於新手要修改,相對的會比較不友善,對老手大師級的可能就沒問題。所以就這樣半刻半bootstrap的情況下,做出這個作品,一定有很多地方需要改進,也請大家給我多一點建議,而且桌機的樣子是好的,可是手機跟平板已經被我改壞了,我還沒辦法同時設想到他們的螢幕畫面,只能先顧著桌機的樣子。

雖然這次的作業花了8小時,但我給自己及格了,畢竟跟第一次切版作業來說,好看太多了,真的是太多了。
https://codepen.io/aqxkrgxm/pen/mddBXOq
附上第一次切版的畫面吧(吐,幫我叫救護車)

--

--