第6課 課程目標

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

第6課 課程內容

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

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

請閱讀入門教學:

https://www.w3schools.com/bootstrap5/bootstrap_tables.php

https://www.w3schools.com/bootstrap5/bootstrap_forms.php

https://www.w3schools.com/bootstrap5/bootstrap_buttons.php

並參考官方說明文件:

https://getbootstrap.com/docs/5.3/content/tables/

https://getbootstrap.com/docs/5.3/forms/overview/

https://getbootstrap.com/docs/5.3/components/buttons/

第6課 作業

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

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

https://codelove.tw/@howtomakeaturn/post/l3j253

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

https://codelove.tw/@howtomakeaturn/post/vx8Lgx

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


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


共有 5 則留言

交作業,再麻煩站長了! 作業一: https://make-up-table.glitch.me 作業二: https://product-forms.glitch.me

按讚的人:

寫得很好,順利完成!

交作業,麻煩站長了 作業一: https://bootstrap-lesson6-hw.glitch.me 作業二: https://bootstrap-lesson6-hw-2.glitch.me

按讚的人:

寫得很好,順利完成!

交作業 麻煩站長了! 作業一: https://imported-nine-liquid.glitch.me/

作業二: https://massive-evanescent-oregano.glitch.me/

按讚的人: