XOOPS輕鬆架 - 線上書籍

:::

BootStarp4實做入門
==============

1. BootStrap4 的斷點前綴詞範圍和BootStrap3 不同： 
  - 最小斷點改為 575px，
  - 又多了一個 `col-xl` 前綴詞，
  - 並將 `col-xs` 改為 `col-`，
  - 此外，BootStrap3 一定要設寬度，例如 `col-sm-3`、`col-sm-9`，但在 BootStrap4 允許不設寬度，例如四組 `col-sm` 時，每個欄位會自動調為 25%，因此，可以輕鬆做到五欄、七欄、八欄...等效果。
2. 斷點差異比較表： <table border="1" cellpadding="0" cellspacing="0" class="table table-bordered table-hover table-condensed" style="border-collapse: collapse; width: 100%;"> <tbody> <tr class="info"> <th style="text-align: center;"> </th> <th style="text-align: center;">575 px 以下</th> <th style="text-align: center;">576 ~ 767 px</th> <th style="text-align: center;">768 ~ 991 px</th> <th style="text-align: center;">992 ~ 1199 px</th> <th style="text-align: center;">1200 px 以上</th> </tr> <tr> <th style="text-align: center;">BootStrap3 前綴</th> <td colspan="2" rowspan="1" style="text-align: center;">col-xs</td> <td style="text-align: center;">col-sm</td> <td style="text-align: center;">col-md</td> <td style="text-align: center;">col-lg</td> </tr> <tr> <th style="text-align: center;">BootStrap4 前綴</th> <td style="text-align: center;">col-</td> <td style="text-align: center;">col-sm</td> <td style="text-align: center;">col-md</td> <td style="text-align: center;">col-lg</td> <td style="text-align: center;">col-xl</td> </tr> <tr> <td style="text-align: center;">對應裝置</td> <td style="text-align: center;">any</td> <td style="text-align: center;">手機</td> <td style="text-align: center;">平板</td> <td style="text-align: center;">桌機螢幕</td> <td style="text-align: center;">大螢幕</td> </tr> </tbody> </table>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D955

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器