RWD(Responsive Web Design)

響應式網頁設計，根據不同的設備（如桌面、平板、手機等）螢幕大小動態調整網頁的布局和內容。

使用彈性布局(偵測螢幕尺寸，偵測裝置方向，使用JavaScript動態更改CSS或添加/移除CSS類別)。

Bootstrap

用於快速開發RWD響應式網站(自適應螢幕大小，多種設備的兼容性)和Web應用程序。
添加.img-fluid類別，這將設置 max-width 為 100% 和 height 為 auto，從而確保它在其父元素中的大小是響應式的。
12列網格系統創建頁面佈局，.col-sm-, .col-md-, .col-lg-等，來為不同的設備屏幕大小定義列的寬度。
提供系列JS插件，模板
可與jQuery, React, Vue集成
模式（Modal）: 浮動在介面上對話框，使用Bootstrap的模式插件。

12列網格系統

<div class="container">
  <div class="row">
    <!-- lg-4在大螢幕每個列都佔用 1/3空間 -->
    <div class="col-lg-4 col-md-6 col-sm-12">內容1</div>
    
    <!-- md-6在中螢幕每個列都佔用 1/2 的空間 -->
    <div class="col-lg-4 col-md-6 col-sm-12">內容2</div>
    
    <!-- sm-12在小螢幕每個列都佔用整行 -->
    <div class="col-lg-4 col-md-6 col-sm-12">內容3</div>
  </div>
</div>