2024年10月11日 星期五

跟著W3C做【完成】~~Bootstrap5


  1. 先確定版型,固定寬(container)或是整幅寬(container-fluid)(有基本code)
  2. 基本的欄位
  3. 有一個".text-break"讓長的字串不會破版。".text-end" 文字靠右。
    ".list-inline"可以做成選單。在下面的範例中搜尋text-break
  4. ".table-responsive"可以讓表格在固定的寬度下,左右滑動(其他網站好像用來當選單,但不會顯示左右拉條)
  5. ".img-fluid"可以讓圖片變成響應式
  6. ".btn-group"可以讓按鈕變成一排,很像選單。
  7. ".dropdown-menu-end"讓子選單靠右
  8. "Accordion"使用card顯示出 collapse
  9. ".nav選單。裡面也有tab,但過多的話可能會破版。
  10. ".navbar"網站的選單。可以固定在最上面或是...
  11. ".carousel圖片的slide
  12. "Modals" 彈跳視窗。要如何做到開網頁就彈跳視窗呢???
  13. "Scrollspy",搭配選單,可以讓畫面跳到那個區塊
  14. "offcanvas "手機選單的樣式
  15. ".border"可以直接顯示框線,不用自己下CSS了。
  16. ".float-start or .float-end"可以左右各有一個div耶@@
  17. ".ratioYT的響應版~~
  18. "Data Lists" 類似搜尋的輸入框
  19. 練習測驗,完成。
用G試算表來當資料庫搭配BS5,尚未完成?!



沒有留言:

張貼留言

注意:只有此網誌的成員可以留言。