育將電腦工作室 - 線上書籍

網頁設計好好玩
=======

一、bootstrap4 容器 主要有二種

1. 一般 ```
  <pre class="brush:as3;">
  <div class="container">
  
  </div>
  ```
2. 滿版 ```
  <pre class="brush:as3;">
  <div class="container-fluid">
  ...
  </div>
  ```
 
二、響應式斷點

1. 總共有5種斷點
2. ```
  <pre class="brush:as3;">
  // 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) { ... }
  ```
  
  對應斷點的大小
  
   ```
  <pre class="brush:as3;">
  @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 以上
  ```
 
三、網格系統

<table class="table table-bordered table-striped table-responsive"> <thead> <tr> <th> </th> <th class="text-center">Extra small  
 <small><576px</small></th> <th class="text-center">Small  
 <small>≥576px</small></th> <th class="text-center">Medium  
 <small>≥768px</small></th> <th class="text-center">Large  
 <small>≥992px</small></th> <th class="text-center">Extra large  
 <small>≥1200px</small></th> </tr> </thead> <tbody> <tr> <th class="text-nowrap" scope="row">Max container width</th> <td>None (auto)</td> <td>540px</td> <td>720px</td> <td>960px</td> <td>1140px</td> </tr> <tr> <th class="text-nowrap" scope="row">Class prefix</th> <td>`.col-`</td> <td>`.col-sm-`</td> <td>`.col-md-`</td> <td>`.col-lg-`</td> <td>`.col-xl-`</td> </tr> <tr> <th class="text-nowrap" scope="row">\# of columns</th> <td colspan="5">12</td> </tr> <tr> <th class="text-nowrap" scope="row">Gutter width</th> <td colspan="5">30px (15px on each side of a column)</td> </tr> <tr> <th class="text-nowrap" scope="row">Nestable</th> <td colspan="5">Yes</td> </tr> <tr> <th class="text-nowrap" scope="row">Column ordering</th> <td colspan="5">Yes</td> </tr> </tbody> </table>

四、範例

1. 自動佈局的欄：使用特定中斷點欄類方便的確定欄的大小，而不是明確的寬度 class，例如`.col-sm-6`。
2. 等寬  
   請 建立 b4.html ```
  <pre class="brush:as3;">
  
      
      <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>
  ```
  
     
   ```
  <pre class="brush:as3;">
  <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.

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown