第2課 課程目標

學會使用 Bootstrap 的 Navbar 元件。

第2課 課程內容

本課內容非常非常簡單,只要能在網頁上做出導覽列就可以了。

請參考:

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

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

內容不用全部讀完,也不用全部讀懂,把其中的程式碼貼一貼,把玩一下,能做出一個最簡單的導覽列即可。

第2課 作業

上一課的作業,我們模仿 Yahoo 新聞的內容,做了一個簡單的新聞文章頁面。

請繼續修改這份作業,將 Yahoo 新聞上方的導覽列做出來。

你將會發現,使用 Bootstrap 能夠快速做出導覽列,比自己用手寫 html、css 方便且快速多了!

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


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

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

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

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

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


每週二 YT 直播問答,DC 可 Call-in,一起討論技術、職涯發展。
YT 👇👇👇
https://www.youtube.com/@codelove_tw
DC 👇👇👇
https://discord.gg/fvCF2whZ9D

提供 Shopify 接案服務:阿川の電商水電行 - 專修 Shopify 網店 👇👇👇
https://job.turn.tw/shopify-services

管理台灣 Shopify 開發者 LINE 群組(非官方)👇👇👇
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA
按讚的人:

共有 15 則留言

交作業
https://bs5-lesson2.glitch.me
練習做了 navbar 漢堡選單

按讚的人:

寫得非常好!看起來已有業界水準!順利完成!

按讚的人:

謝謝站長的鼓勵! (淚

交作業囉,麻煩站長。bootstrap,跟之前用css的方法好不一樣,還是比較喜歡另外寫在css上,不喜歡全部都在class裡,這是有辦法改變的嗎,還是已經是最精簡的寫法了呢
https://bootstrap-hw1.glitch.me

按讚的人:

沒問題,順利完成作業!
你的提問非常好,請到「討論專區」發問,一起在那邊進行深入的討論&回答!

按讚的人:

延續上一份作業,我沒有實作全部的 <li>
不過有比較清楚了解到 bootstrap 提供了很便利的 class ,但如果要調整一些細節,
客製化還是稍微小麻煩一點。

Link: https://typhoon-nonstop-minibus.glitch.me/

按讚的人:

寫得很好,順利完成!

免費

自學網頁の嬰兒教材:Bootstrap

業界最常用到的基本工具,美化介面設計懶人包,前端新手必學的入門教材!


每週二 YT 直播問答,DC 可 Call-in,一起討論技術、職涯發展。
YT 👇👇👇
https://www.youtube.com/@codelove_tw
DC 👇👇👇
https://discord.gg/fvCF2whZ9D

提供 Shopify 接案服務:阿川の電商水電行 - 專修 Shopify 網店 👇👇👇
https://job.turn.tw/shopify-services

管理台灣 Shopify 開發者 LINE 群組(非官方)👇👇👇
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA