3.
BootStrap響應式框架
一、 BootStrap網站
- 官網：http://getbootstrap.com/
- 正體中文手冊：http://bootstrap.hexschool.com/docs/4.0/getting-started/introduction/
- 簡體中文手冊：https://code.z01.com/v4/docs/
- 下載最新版 bootstrap4：http://bootstrap.hexschool.com/docs/4.0/getting-started/download/ ，解壓到 【www】裡面。
- 由於BootStrap4拿掉了圖示，所以，我們可以直接到 https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 下載，解壓後，將 【css】改【fontawesome_css】 複製到 【css】裡面，【webfonts】複製到【css】 。
- X-UA-Compatible用來指定IE瀏覽器的渲染模式 ，不分大小寫，必須用在 head 中，必須在除 title 外的其他 meta 之前使用。IE=edge 表示什麼版本IE 就用什麼版本的標準模式。
<meta http-equiv="X-UA-Compatible" content="ie=edge">
- 引入BootStrap4檔案及font-awesome檔案
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome_css/all.css">
- 修改 index.html，內容如下：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 什麼版本IE 就用什麼版本的標準模式(給IE看的，不然樣式有時候會怪怪的) -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome_css/all.css">
<title>待辦清單</title>
</head>
<body>
<!-- 標題 -->
<h1>我的待辦事項清單</h1>
<!-- 水平線 -->
<hr>
<!-- 段落 -->
<p>
日期：2020/06/08
</p>
<!-- 列表 -->
<ul>
<li>今天到期：1</li>
<li>逾期：2</li>
</ul>
<!-- 表格 -->
<table border="1" width="1920">
<tbody>
<tr >
<th><i class="fas fa-check"></i>是否完成</th>
<th></i>標題</th>
<th>到期日</th>
<th>優先順序</th>
<th>指派對象</th>
</tr>
<tr>
<td>完成</td>
<td>撰寫程式</td>
<td>2020/06/08</td>
<td>低</td>
<td>李大頭</td>
</tr>
<tr>
<td>未完成</td>
<td>開會</td>
<td>2020/06/08</td>
<td>高</td>
<td>李大頭、主任、XX科</td>
</tr>
</tbody>
</table>
</body>
</html>
二、 Font Awesome
- 用法：
<i class="fas fa-[NAME]"></i>
- 可用圖形：https://fontawesome.com/cheatsheet
2-1 index.html