Chapter 5 HTML/CSS 5

講解成員：國立臺北大學經濟學系 鄭喬翊

5.1 教材

5.2 學習主題

  • 如何使用 Containers 定義物件位置

  • 如何使用 Grid 排版

  • 運用 Containers 跟 Grid 完成初步網頁模板

5.3 主題內容

<head>中引入 bootstrap 網址

<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

</head>

5.3.1 Containers

  • container
<div class="container">
  <h1>Responsive Containers</h1>
</div>
  • 其他 container 用法
<div class="container-sm border">.container-sm</div>
<div class="container-md mt-3 border">.container-md</div>
<div class="container-lg mt-3 border">.container-lg</div>
<div class="container-xl mt-3 border">.container-xl</div>

5.3.2 Grid

  • Step 1 建立一個<div>(row)
  <div class="row">
  
  </div>
  • Step 2 在<div class = "row">輸入文字
  <div class="col-sm-6 col-md-9">
  
    <!-- Content here -->

  </div>
  <div class="col-sm-6 col-md-3">
  
    <!-- Content here -->

  </div>

5.4 課後練習

5.4.1 A

使用 Containers 和 Grid 做出一個如 sample 的網頁範例。

sample：https://drive.google.com/drive/folders/1HRfPjaoa3zvz7_6oAibNXXZA_ctM_jL9?usp=sharing

5.4.2 B


將完成的 HTML 引入 Rmd 檔，完成一個網頁形式。
hint：電子書 2.3 節