線上書籍

Home

Google雲端無紙化工作術

一、網頁模板(含導航)
行23：ml-auto 靠右對齊、mr-auto 靠左對齊

<!doctype html> <html lang="zh_TW"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <title>網站標題</title> </head> <body> <!-- 導航列 --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="#">網站標題</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="index.html">首頁 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#" target="_blank">選單(另開視窗)</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 下拉選單 </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">選單1</a> <a class="dropdown-item" href="#">選單2</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">選單3</a> </div> </li> </ul> </div> </div> </nav> <!-- 導航列 end --> <!-- 網站內容 --> <!-- 網站內容 end--> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> </body> </html>

二、內容

  1. 外邊界：margin、top、right、bottom、left
  2. 值：1~5
  3. m-5：代表四邊距外邊5單位
  4. mt-5：代表上邊距外邊5單位
  5. mx-5：代表左、右距外邊5單位
  6. my-5：代表上、下距外邊5單位

 

  1. 內邊界：padding、top、right、bottom、left
  2. 值：1~5
  3. p-5：代表四邊距內邊5單位
  4. pt-5：代表上邊距內邊5單位
  5. px-5：代表左、右距內邊5單位
  6. py-5：代表上、下距內邊5單位
<div class="container"> <h1>內容區塊標題</h1> <div class="row"> <div class="col-sm-6">左邊</div> <div class="col-sm-6">右邊</div> </div> </div>

三、範例

  1. 嵌入Google表單
  2. 嵌入Google試算表
  3. 嵌入Google日曆
  4. 嵌入Google簡報