:::

3-2 設計RWD顯示界面

一、建立預設頁面:

  1. 請先建立 index.html
  2. 按下!,然後按Enter可產生HTML5基本頁面
  3. 按下!,選擇 !b5-$,然後按Enter可產生HTML5+BootStrap5的基本頁面,如:
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Bootstrap Site</title>
        <link
          rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
          crossorigin="anonymous"
        />
        <script
          src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
          integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
          crossorigin="anonymous"
        ></script>
        <script
          src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
          integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
          crossorigin="anonymous"
        ></script>
      </head>
      <body>
        <h1>Hello-Bootstrap</h1>
      </body>
    </html>
    
    1. bootstrap.min.css:是主要的BootStrap樣式檔案,必須引入
    2. popper.min.js:是導覽列等部份元件會用到的js套件(有用到導覽列就必須引入)
    3. bootstrap.min.js:BootStrap部份元件會用到的js(有用到就必須引入)
    4. integrity 屬性是資源完整性規範的一部分,它允許你為 script 提供一個 hash,用來進行驗簽,檢驗加載的JavaScript 文件是否完整,減少XSS 風險。
    5. crossorigin="anonymous":crossorigin 會讓瀏覽器啟用CORS訪問檢查,不填的話等同crossorigin="anonymous",所以其實可以拿掉。
       
  4. 其中<meta>部份認識一下,還頗重要,這是用告知瀏覽器一些頁面的初始設定為何
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    1. charset="UTF-8":告知瀏覽器,這頁採用UTF-8編碼,若設定錯誤,可能導致亂碼
    2. name="viewport" content="width=device-width, initial-scale=1.0":告知瀏覽器,頁面呈現寬度要等同裝置寬度,且螢幕畫面的初始縮放比例為 100%。
       

二、改用本地端檔案:

  1. 由於我們自己有裝BootStrap5,所以無須從網路引入,直接讀取我們安裝的檔案即可
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>校園日誌</title>
        <link
          href="/node_modules/bootstrap/dist/css/bootstrap.min.css"
          rel="stylesheet"
        />
        <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
      </head>
      <body>
        <h1>Hello-Bootstrap</h1>
      </body>
    </html>
    
    1. 用npm安裝的套件一律裝在node_modules下,且正式檔案一般都在dist目錄中
    2. bootstrap.bundle.min.js 可以取代 popper.min.js+bootstrap.min.js
    3. 看起來像這樣:

:::

書籍目錄

展開 | 闔起

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1773

計數器

今天: 4284428442844284
昨天: 5069506950695069
總計: 5134732513473251347325134732513473251347325134732