BootStrap經典案例分析

內容簡介

教學目標

窄螢幕模式網頁設計_任務發布

窄螢幕模式網頁設計_技能點

窄螢幕模式網頁設計_準備工作

窄螢幕模式網頁設計_step1_框架搭建

窄螢幕模式網頁設計_step2_導覽列設計

窄螢幕模式網頁設計_step3_jumbotron標題

窄螢幕模式網頁設計_step4_設計各板塊內容

窄螢幕模式網頁設計_step5_自訂CSS美化頁面

窄屏模式網頁設計_案例小結

固定版面模式網頁設計_任務發布

固定版面模式網頁設計_準備工作

固定佈局模式網頁設計_step1_框架搭建

固定佈局模式網頁設計_step2_內容佈局排版

固定版面模式網頁設計_step3_設計標題內容

固定版面模式網頁設計_step4_設計Column版塊內容

固定佈局模式網頁設計_step5_響應式導覽列設計

固定版面模式網頁設計_案例小結

登入介面實戰_step1_任務發布&技能點數分析

登入介面實戰_step2_加入表單登入各元件

登入介面實戰_step3_加入用於美化的CSS

登入介面實戰_step4_將表單元素套用CSS

登入介面實戰_step5_強化功能效果

登入介面實戰_案例小結

實戰流動佈局_任務發布

實戰流動佈局_技能點、準備工作

實戰流動佈局_step1_整體框架搭建

實戰流動佈局_step2_頂部導覽列設計

實戰流動佈局_step3_標題版塊設計

實戰流動佈局_step4_內容明細響應式設計

實戰流動佈局_step5_設計側邊導航欄

實戰流動佈局_step6_重構側邊導航列小螢幕隱藏

實戰流動佈局_step7_重構標題列加入動態內容

實戰流動佈局_step8_為動態內容附加JS事件

實戰流動佈局_案例小

行銷類網站設計_任務發布、技能點數分析

行銷類網站設計_準備工作、實現步驟分析

行銷類網站設計_step1_首頁整體架構設計

行銷網站設計_step2 _細化頂部導覽欄

行銷類網站設計_step3_設計突顯標題

行銷類網站設計_step4_內容明細的設計

行銷類網站設計_step5_自訂CSS美化頁面

行銷類網站設計_案例小結

網頁頂部與底部貼上效果_任務發布

網頁頂部與底部貼上效果_技能點與準備工作

網頁頂部與底部貼上效果_step1_整體框架佈局

網頁頂部與底部貼上效果_step2_頂部導覽欄

網頁頂部與底部貼上效果_step3_底部元素設計

網頁頂部與底部貼上效果_step4_內部部分設計

網頁頂部與底部貼上效果_step5_底部導航固定效果

網頁頂部與底部貼上效果_step6_自訂CSS美化頁面

網頁頂部與底部貼上效果_案例小結

部落格頁面_任務發布

部落格頁面_技能點與準備工作

部落格頁面_step1_整體框架搭建

部落格頁面_step2_頂部導覽列

部落格頁面_step3_尾部內容設計

部落格頁面_step4_設計頂部標題

部落格頁面_step5_內容部分排版設計

部落格頁_step6_底部文章分頁

部落格頁_step7_側邊欄內容設計

部落格頁面_step8_加入CSS美化頭部選單

部落格頁面_step9_加入CSS美化尾部內容

部落格頁面_案例小結