1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [教學] 透過 Bootstrap Order 屬性,可任意調整DIV區塊的顯示排序
網頁開發 網頁設計

[教學] 透過 Bootstrap Order 屬性,可任意調整DIV區塊的顯示排序

2020/08/05

梅問題-[教學] 透過 Bootstrap Order 參數可任意的調整DIV區塊的顯示排序
  有製作過RWD自適應網頁的朋友都知道,RWD就是用區塊一個一個的堆疊起來,因此當不同的顯示尺寸時,區塊就會由右向左堆疊,所以在排版上相當的受限,為了解決這個問題,讓排版變得更靈活 Bootstrap 3.0 時,就已有push、pull透過一拉一推的方式,來改變區塊的顯示排序,雖然說很好用,但推、拉的參數,與分割的區塊大小成反比,這樣才能正常的運作。

  雖然這是一個很好的機制,但每次在使用時,梅干總覺得不夠直覺,因此到了Bootstrap 4.0後,將排版改為flex屬性後,現在只需透過order屬性,就可任意的改變區塊的排列顯示,且設定更直覺、更簡單,因此還沒用過的朋友,現在也一塊來看看!


Step1
首先,梅干透過Bootstrap的網格系統,將區塊分割成四等分,並將這四個區塊,依順序命名為ABCD。
梅問題-[教學] 透過 Bootstrap Order 參數可任意的調整DIV區塊的顯示排序
Step2
當預覽時,區塊就會由左至右開始排序,分別為A->B->C->D。
梅問題-[教學] 透過 Bootstrap Order 參數可任意的調整DIV區塊的顯示排序
Step3
這時候在後方加上order-裝置-排序,所以只需輸入序號就可以了,當設定完後,就會看到區塊就會依照,剛所設定的序號進行排序,這時就會變成D->C->B->A。
梅問題-[教學] 透過 Bootstrap Order 參數可任意的調整DIV區塊的顯示排序
Step4
而這個排序很自由了,剛sm是在平板的顯示排序,若要改變在桌機的排序時,則是使用order-lg-*,當輸入完畢後,區塊就會依照剛所設定的排序。
梅問題-[教學] 透過 Bootstrap Order 參數可任意的調整DIV區塊的顯示排序
Step5
甚至就連在行動裝置,也可改變顯示排序,因此有了order這個屬性,真的是超方便的啦!而最近推出的Bootstrap5,讓排版變得更靈活啦!還沒時間研究的朋友,也可先看下這一篇囉!
Bootstrap5 全新的Grid網格系統搶先看!讓版面編排更靈活
梅問題-[教學] 透過 Bootstrap Order 參數可任意的調整DIV區塊的顯示排序