bootstrap4柵格系統
柵格系統是基於乙個12列、有5種響應尺寸(對應不同的螢幕）的布局。bootstrap4柵格系統共有五個類：
.col- 針對所有裝置
.col-sm- 平板 - 螢幕寬度等於或大於 576px
.col-md- 桌面顯示器 - 螢幕寬度等於或大於 768px)
.col-lg- 大桌面顯示器 - 螢幕寬度等於或大於 992px)
.col-xl- 超大桌面顯示器 - 螢幕寬度等於或大於 1200px)
這些類的意思通俗點說就是，當你同時使用這些類的時候，它會根據你的螢幕大小來使相應的類生效。
下面我們再來看一下，這些類是怎麼使用的
<
div
class
="row"
>
<
div
class
="col-9"
>這個div中放置輪播，並且它佔9列
div>
<
div
class
="col-3"
>這個div中放置排行榜，並且它佔3列
div>
div>
最後在補充一點，柵格系統必須放在container容器類下，也就是說上面的**外面還要再巢狀一層，就是
<
div
class
="container"
>
div>
下面這也是用柵格系統做的響應式布局，這是螢幕解析度符合.col-md- 桌面顯示器 - 螢幕寬度等於或大於 768px)時的布局情況
下面是螢幕解析度符合.col-sm- 平板 - 螢幕寬度等於或大於 576px時的布局。這時我們可以看到電影列表從一行6個變為了一行4個，也就是說它根據螢幕大小自動排列變化了這就是響應式。
下面我們看一下大致的布局**
class="
container
">
class="
row">
class="
col-md-2 col-sm-3
">這個div中放置要顯示的各個電影
【猿2048】www.mk2048.com
bootstrap響應式布局
1.bootstrap布局容器 bootstrap 需要為頁面內容和柵格系統包裹乙個 container 或者.container fluid 容器，它提供了兩個作此用處的類。container container fluid 2.bootstrap柵格系統 bootstrap提供了一套響應式 移動...
響應式布局與Bootstrap
bootstrap的介紹 什麼是響應式布局 讓乙個 相容不同解析度的裝置 給使用者更好的視覺使用體驗。響應式布局的優缺點優點 解決了裝置之間的差異化展示 讓不同的裝置達到最優的體驗 缺點 對開發者來說，相容性 多，工作量大，對瀏覽器來說，載入速度受影響 響應式布局設計原則移動優先 在設計的初期就要考...
bootstrap的響應式布局
可參考 進行使用 通過檢測裝置資訊，決定網頁布局方式，即使用者如果採用不同的裝置訪問同乙個網頁，有可能會看到不一樣的內容，一般情況下是檢測裝置螢幕的寬度來實現。螢幕變小了之後，屬於同一行的元素受到擠壓後，行的右邊元素自動換行顯式 螢幕大了後，本屬於同一行的元素盡可能的排在同一行內 乙個簡單的案例 d...