大家好，今天要來繼續介紹bootstrap

網格系統

要介紹bootstrap就一定要先介紹他的平面設計方式。而網格系統就是bootstrap最好用的

網格系統簡介

• Bootstrap的網格系統是一種把寬分成12等分，這是一個可自由組合的網格系統，可幫助您在不同屏幕尺寸和設備上創建具有良好佈局的網頁。這12欄網格可以在行內排列，讓您輕鬆控制內容的佈局。
• Bootstrap的網格系統具有響應式特性，可自動調整內容以適應不同尺寸的螢幕和設備，包括桌面、平板電腦和手機。您可以使用不同的CSS類來定義在不同屏幕尺寸下的佈局，以確保您的網站在各種設備上都能正確顯示。

使用原則

• bootstrap支援6種響應式斷點:
  xs(Extra Small):這是最小的斷點，用於非常小的屏幕，例如移動設備的縱向模式。在此斷點下，Bootstrap的網格系統通常是最簡單的配置。
  sm(Small):這個斷點用於小型屏幕，如平板電腦。在此斷點下，網格系統可以進行稍微複雜的配置，以提供更好的用戶體驗。
  md(Medium):這是中等尺寸的斷點，通常用於桌面設備。在此斷點下，您可以創建更複雜的佈局，並適應較大的屏幕。
  lg(Large):這個斷點用於大型桌面屏幕，允許更寬的佈局和更多的內容。
  xl(Extra Large):這是非常大的屏幕斷點，通常用於大型桌面顯示器或高分辨率屏幕。
  xxl(Extra Extra Large):這個斷點用於特大型屏幕，例如大型電視或高分辨率顯示器。
  斷點是指設定在特定最小寬度的點，通過這些斷點，我們可以控制容器和網格行的大小和行為，以適應不同的屏幕尺寸。

• 內容是放在column中，而column是放在row中

• 為了有適當的對齊與留白，row必須放在.container類別的容器中。

• 使用.row 、.col-、.col-sm-等預先定義的網格類別來設計版面

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            內容1
        </div>
        <div class="col-sm-4">
            內容2
        </div>
        <div class="col-sm-4">
            內容3
        </div>
    </div>
</div>

當瀏覽器的寬度足夠時會排成一列

當瀏覽器的寬度不足時會各自排成一列

今天的介紹就到這，謝謝大家