F2E合作社|overflow通用類別|Bootstrap 5網頁框架開發入門


Posted by itiswonderfall on 2021-11-24

前言

身為網頁設計忍者,學會風遁 overflow 術是必須的,能讓你面對不同敵人時,決定要現身、隱身還是影分身,在作戰時可是相當好用,查克拉儲備足夠了嗎?那就開始吧!

圖片來源

 


 

官方網站的 Overflow 頁面

之前也有寫過相關文章,所以這裡只會簡略說明,想看更詳盡的介紹 這邊 歡迎光臨!

 


 

overflow

使用四個預設的值與類別,即時的調整 overflow 屬性,預設情況下這些類別並非響應式的。

.overflow-auto

自動選擇由瀏覽器決定如何顯示( 預設值 ),當超出範圍時自動變成捲軸呈現方式。

<div class="overflow-auto">...</div>

 

.overflow-hidden

內容會被修剪,但不會顯示捲軸,當超出元素的範圍時隱藏內容。

<div class="overflow-hidden">...</div>

 

.overflow-visible

內容不會被修剪,當超出元素的範圍時內容會呈現在元素框之外。

<div class="overflow-visible">...</div>

 

.overflow-scroll

內容會被修剪,當超出範圍時自動變成捲軸呈現方式。

<div class="overflow-scroll">...</div>

 


 

參考資料

  1. Overflow · Bootstrap v5.0
  2. 溢出 (Overflow) · Bootstrap 5 繁體中文文件 - 六角學院 v5.0
  3. 共用項目overflow-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學

#f2e #F2E合作社 #bootstrap5 #網頁框架開發 #overflow







Related Posts

Laravel blade 基礎

Laravel blade 基礎

[評價] 羅技鍵鼠組 MK240 NANO (K240+M212)

[評價] 羅技鍵鼠組 MK240 NANO (K240+M212)

WeakMap

WeakMap


Comments