尤川豪   ·  7月前
Exp. 1,778  ·  231 貼文  ·  164 留言

自學網頁の嬰兒教材:第6課 ── 表格、表單與按鈕:基本元素也漂亮

第6課 課程目標

學會如何套用 bootstrap 的表格、表單與與按鈕樣式。

第6課 課程內容

表格、表單與按鈕是網頁最基本的元素之一,就算不使用 bootstrap,html 原生就有這些元素的樣式。

不過,套用 bootstrap 樣式之後,會馬上讓這些元素好看起來,這一課要學習如何套用它們。

請閱讀入門教學:

https://www.w3schools.com/bootstrap4/bootstrap_tables.asp

https://www.w3schools.com/bootstrap4/bootstrap_forms.asp

https://www.w3schools.com/bootstrap4/bootstrap_forms_inputs.asp

https://www.w3schools.com/bootstrap4/bootstrap_buttons.asp

並參考官方說明文件:

http://getbootstrap.com/docs/4.1/content/tables/

http://getbootstrap.com/docs/4.1/components/forms/

http://getbootstrap.com/docs/4.1/components/buttons/

第6課 作業

這一課的作業有兩個,我們先不使用 bootstrap,把畫面做出來,接著再套用 bootstrap,讓畫面變漂亮。

作業一:請將「自學網頁の嬰兒教材:HTML與CSS」的第四課作業完成,並接著將 bootstrap table 套用進去

https://devs.tw/post/65

作業二:請將「自學網頁の嬰兒教材:HTML與CSS」的第五課作業完成,並接著將 bootstrap form、input 與 button 套用進去

https://devs.tw/post/66

完成這些,你就完成這次的課程目標了!

  分享   共 461 次點閱
共有 2 則留言
feifeitzu   ·  4月前
Exp. 121  ·  0 貼文  ·  21 留言

作業一:https://thimbleprojects.org/feifeitzu/654214/

作業二:https://thimbleprojects.org/feifeitzu/655273/

套用bootstrap修改樣式的速度真的快好多!要邁入第7課了~謝謝版主~

 
尤川豪   ·  4月前
Exp. 1,778  ·  231 貼文  ·  164 留言

寫得很好! 沒錯 業界也很常使用 bootstrap 很好用吧! 繼續加油!

您的留言