學會如何套用 bootstrap 的表格、表單與與按鈕樣式。
表格、表單與按鈕是網頁最基本的元素之一,就算不使用 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/
這一課的作業有兩個,我們先不使用 bootstrap,把畫面做出來,接著再套用 bootstrap,讓畫面變漂亮。
作業一:請將「自學網頁の嬰兒教材:HTML與CSS」的第四課作業完成,並接著將 bootstrap table 套用進去
https://codelove.tw/@howtomakeaturn/post/l3j253
作業二:請將「自學網頁の嬰兒教材:HTML與CSS」的第五課作業完成,並接著將 bootstrap form、input 與 button 套用進去
https://codelove.tw/@howtomakeaturn/post/vx8Lgx
完成這些,你就完成這次的課程目標了!
歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!
可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!
發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!
貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!
未來面試時,分享給面試官看,會讓人知道你的積極程度!
交作業,麻煩站長了
作業一:
https://bootstrap-lesson6-hw.glitch.me
作業二:
https://bootstrap-lesson6-hw-2.glitch.me
交作業 麻煩站長了!
作業一: https://imported-nine-liquid.glitch.me/
交作業,再麻煩站長了!
作業一:
https://make-up-table.glitch.me
作業二:
https://product-forms.glitch.me