線上書籍

一、bootstrap4 容器 主要有二種

1. 一般 <div class="container"> <!-- Content here --> </div>

    

2. 滿版 <div class="container-fluid"> ... </div>

    

二、響應式斷點

1. 總共有5種斷點
2. // Extra small devices (portrait phones, less than 576px) // No media query since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

   對應斷點的大小
    

   @include media-breakpoint-up(xs) { ... } 576px 以下 @include media-breakpoint-up(sm) { ... } 576px - 768px @include media-breakpoint-up(md) { ... } 768px - 992px @include media-breakpoint-up(lg) { ... } 992px - 1200px @include media-breakpoint-up(xl) { ... } 1200px 以上

    

三、網格系統

 

  Extra small
<576px Small
≥576px Medium
≥768px Large
≥992px Extra large
≥1200px Max container width Class prefix # of columns Gutter width Nestable Column ordering

None (auto)	540px	720px	960px	1140px
.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
12
30px (15px on each side of a column)
Yes
Yes

四、範例

1. 自動佈局的欄：使用特定中斷點欄類方便的確定欄的大小，而不是明確的寬度 class，例如.col-sm-6。
2. 等寬
   請 建立 b4.html <!-- 外觀 --> <style type="text/css"> .container .row>.col, .container .row>[class^=col-] , .container .row>[class^=w-]{ padding-top: .75rem; padding-bottom: .75rem; background-color: rgba(86,61,124,.15); border: 1px solid rgba(86,61,124,.2); } </style>
   <div class="container"> <div class="row"> <div class="col"> 1 of 2 </div> <div class="col"> 2 of 2 </div> </div> <div class="row"> <div class="col"> 1 of 3 </div> <div class="col"> 2 of 3 </div> <div class="col"> 3 of 3 </div> </div> </div>

    

3.