Bootstrap提供了不少的排版方式，這些排版方式都考慮到響應式設計(Responsive Web Design)，也就是會因應畫面大小而調整。

Breakpoints

在bootstrap裡設定了一些常見的螢幕大小尺寸，將螢幕分為:

其實就是在css裡針對不同螢幕尺寸做了排版的設定:

@media (min-width: 1200px) {

}

Containers

Container是bootstrap最基本的排版容器，Container不會佔滿整個畫面，會留一些空間

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <h1>Hello, world!</h1>
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-secondary">Secondary</button>
    </div>
    <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
  </body>
</html>

image.png

如果要永遠佔滿100%，可以使用container-fluid。

image.png

Grid system