1. 下載CDN至專案目錄中「css」「js」

  2. 範本

    
<!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <title>Bootstrap 離線版</title>
  </head>
  <body>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.2.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

  3. 響應式中繼標籤

    Bootstrap 的開發以行動優先為策略，按照這個策略，我們優先為行動裝置優化程式碼，然後使用 CSS media queries 在必要時放大元件。為了確保全部裝置上有正確渲染和和觸控縮放，將響應式中繼標籤記添加到你的<head>中。

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <font color="red">width=device-width</font> ：表示寬度是設備螢幕的寬度
    initial-scale=1：表示初始的縮放比例， 可以讓網頁的寬度自動適應手機螢幕的寬度
    shrink-to-fit=no：但蘋果在iOS9更新中更改了initial-scale 的用途，故使用「shrink-to-fit=no」來替代，以讓網頁的寬度自動適應手機螢幕的寬度

results matching ""

    No results matching ""