13-1 bootstrap4 排版

一、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 以上
   

    

三、網格系統

四、範例

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.