iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
7
影片教學

金魚都能懂的Bootstrap5網頁框架開發系列 第 3

Bootstrap5 格線系統入門-金魚都能懂的Bootstrap5網頁框架開發入門

  • 分享至 

  • xImage
  •  

Bootstrap已是目前全球被大量網頁開發者使用的一個網頁UI框架了,其特色在於使用簡單,開發快速,自訂化功能彈性簡單,不管是前端開發或是後端介面,都是非常適合使用的一套框架系統,今天先跟著Amos一起來了解怎麼安裝Bootstrap5,以及怎麼測試是否有安裝成功吧

https://ithelp.ithome.com.tw/upload/images/20201003/20112550kjZqJD4nUd.jpg

重點提醒

  • 歡迎開啟字幕觀看
  • 斷點是甚麼
  • 定寬容器是甚麼
  • 定寬容器的寬度在不同裝置上面會有甚麼變化
  • 格線系統是採用甚麼CSS屬性製作的
  • row有哪些作用
  • 怎麼讓格線系統做到滿版
  • 格線系統預設把畫面分割成幾等分,其原因又是甚麼
  • 格線系統使用甚麼CSS class名稱來製作多欄畫面
  • 格線系統的兩種控制欄數的作法
  • Bootstrap5新的格線系統怎麼變更欄與欄之間的間距
  • 格線系統的class名稱中,怎樣做到不同裝置不同欄數
  • 影片原始網址 https://youtu.be/OfaswRwuWY0

「金魚都能懂的CSS選取器」已集結成書,並於書中添加一些新篇章及細節補充,有興趣的朋友可至天瓏書局選購,感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
https://ithelp.ithome.com.tw/upload/images/20200917/20112550bxAFk2frMp.jpg
讓我們好好善用CSS選取器吧


金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的CSS必學屬性

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


上一篇
Bootstrap5 安裝與快速檢測方式-金魚都能懂的Bootstrap5網頁框架開發入門
下一篇
Bootstrap5格線的對齊與分佈-金魚都能懂的Bootstrap5網頁框架開發入門
系列文
金魚都能懂的Bootstrap5網頁框架開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言