網頁設計好好玩

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

     

三、網格系統

 

  Extra small
<576px		 Small
≥576px		 Medium
≥768px		 Large
≥992px		 Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering 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.