Bootstrap安裝

0.範例網站(以海星中學為例)

響應式網頁設計(Responsive Web Design)簡稱RWD

又稱適應性網頁、自適應網頁設計、回應式網頁設計、多螢網頁設計


1.下載Bootstrap 4(Bootstrap 4中文官方網站)


2.解壓縮檔案，將解壓縮完的檔案放在 C:\AppServ\www

如果沒有裝網頁伺服器，檔案放在 下載 即可

解壓縮檔案共有兩個資料夾

(1) CSS

(2) js


3.下載 jquery：https://jquery.com/download/，並存入 js 資料夾中

4. 下載popper.js ：https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js，存入 js 資料夾中

5.安裝NotePad++(NotePad++官方網站)


6.用NotePad++，建立測試首頁(檔案內容請複製下方)，並進行測試

(1) 編譯成UTF-8碼

(2) 檔案名稱：index.html 


<!DOCTYPE html>
<html lang="zh-Hant-TW">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>測試網頁</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

  </head>
  <body>

   <div class="container">
   <div class="jumbotron">
    <h1>綜二資訊  青春無敵啦!</h1>      
    <p>我們有綜二忠 綜二孝 綜二仁 綜二愛</p>
   </div>
    <p>這是測試ㄨㄣˊㄗˋ</p>      
    <p>這是另一段測試文字</p>      
  </div>

  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

7.在CSS資料夾建立style.css，檔案中加入

body{
  font-family: '微軟正黑體';
}

改變字型為微軟正黑體