網頁設計好好玩

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.