XOOPS輕鬆架 - 線上書籍

:::

BootStarp4實做入門
==============

1. 建立一個專案目錄，例如：bs4
2. 先下載最新版 bootstrap4：<http://bootstrap.hexschool.com/docs/4.0/getting-started/download/>
3. 下載後，解壓縮到專案目錄中，會得到 js 及 css 兩個資料夾。
4. 由於BootStrap4拿掉了圖示，所以，我們可以直接到 <http://fontawesome.io/> 下載，解壓後，將 fonts 及 css 複製到 bs4 裡面。
5. 接著下載 jquery：<https://jquery.com/download/>，並存入 js 資料夾中
6. 最後下載popper.js ：<https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js>，存入 js 資料夾中
7. 建立新檔 index.html，內容如下： ```
    
    
    <html lang="zh-Hant-TW">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <link rel="stylesheet" href="css/my.css">
    </head>
    
    <body>
        <h1>Hello, world!</h1>
    
    
        
        
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
    
    </html>
    ```
8. `width=device-width` ：表示寬度是設備螢幕的寬度
9. `initial-scale=1`：表示初始的縮放比例， 可以讓網頁的寬度自動適應手機螢幕的寬度
10. 但蘋果在iOS9更新中更改了initial-scale 的用途，故使用`shrink-to-fit=no` 來替代，以讓網頁的寬度自動適應手機螢幕的寬度
11. 其中的 css/my.css 是用來放置自己定義的CSS 內容，例如想要讓頁面改用微軟正黑體，只要在裡面加入字型設定即可： ```
    
    body{
      font-family: '微軟正黑體';
    }
    ```
12. 下方的JS引入順序請勿隨意調整。
13. 詳情：<http://bootstrap.hexschool.com/docs/4.0/getting-started/introduction/>
 
</body></html>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D933

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器