Jill 筆記 - 線上書籍

:::

PHP從入門到放棄實戰班
============

1. 快速產生  
   在 Visual Studio Code 中輸入`b4-navbar-b`( b4-navbar-background：Bootstrap NavBar元件 ) 按 <kbd>Enter</kbd> 可以快速產生導覽列的語法。
2. 基本程式碼 
  ```markup
  <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
          aria-expanded="false" aria-label="Toggle navigation"></button>
      <div class="collapse navbar-collapse" id="collapsibleNavId">
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
              <li class="nav-item active">
                  <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#">Link</a>
              </li>
          </ul>
      </div>
  </nav>
  ```
3. 修改標題：超連結屬性練習連結位置href、框架位置target。 
  - target="\_self"：在本頁(自己)切換，與不加 target 相同。
  - target="任意"：指定開啟一個新視窗，後續開啟之新視窗會蓋掉前面已開啟的舊視窗。
  - target="\_blank"：開啟一個新的視窗，後續開啟之新視窗會產生另一個新的視窗，不會蓋掉前面已開啟的舊視窗。
4. 加入圖片 
  ```markup
  <img src="images/logo.jpg" class="rounded-circle" width="100%" height="200rem" alt="logo">
  ```
  
  
  - <https://unsplash.com>
  - <https://www.hexschool.com/2016/01/02/2016-08-08-em-vs-rem/>
  - 另一種效果，導覽列圖片樣式：（圓角）.rounded，（圓形）.rounded-circle，（外框）.img-thumbnail。
  - ```markup
      <a class="navbar-brand" href="#"><img src="images/logo.jpg" class='rounded-circle' height="100rem">
        <h1>我的待辦事項清單</h1>
      </a>
      ```
5. 欄位推移 
  - `.mr-auto` 來將右邊剩下的空位謄出來。
  - `.mx-auto` 把空位平均分散到左右兩邊 。
  - `.ml-auto` 把空位放到左邊 。 
      ```markup
      <ul class="navbar-nav  ml-auto mt-2 mt-lg-0">
          <li class="nav-item active">
              <a class="nav-link" href="#">回首頁 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">發布待辦事項</a>
          </li>
      </ul>
      ```
6. 手機畫面 
  - 加入選單ICON，記得引入 
      ```javascript
      <script src="js/bootstrap.min.js"></script>
      ```
      
       
      ```markup
      <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
          aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
      ```
  - 下載 jquery：<https://jquery.com/download/>，並存入 js 資料夾中
  - 分別引入js 
      ```javascript
      <script src="js/jquery-3.5.1.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      ```
7. 程式碼 
  ```markup
  
  <html lang="zh-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">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/fontawesome_css/all.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <title>待辦清單</title>
  </head>
  <body>
    <div class="container">
      <img src="images/logo.jpg" class="rounded-circle mx-auto d-block" width="100%" height="200rem" alt="logo">
      <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
          <a class="navbar-brand" href="#">
              <h1>我的待辦事項清單</h1>
          </a>
  
          <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
              aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="collapsibleNavId">
              <ul class="navbar-nav  ml-auto mt-2 mt-lg-0">
                  <li class="nav-item active">
                      <a class="nav-link" href="#">回首頁 <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">發布待辦事項</a>
                  </li>
              </ul>
          </div>
      </nav>
      <hr>
  <div class="row">
      <div class="col-sm-3">
          <p>
            日期：2020/06/08
          </p>
      </div>
      <div class="col-sm-9">
          <ul>
              <li>今天到期：1</li>
              <li>逾期：2</li>
          </ul>
      </div>
  </div>
  
  <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover table-sm">
        <thead  class="thead-dark">
          <tr>
            <th><i class="fas fa-check"></i> 完成</th>
            <th>描述</th>
            <th>到期日</th>
            <th>優先順序</th>
            <th>指派對象</th>
            <th>地點</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>完成</td>
            <td>撰寫程式</td>
            <td>2020/06/08</td>
            <td>低</td>
            <td>李大頭</td>
            <td>研討室</td>
          </tr>
          <tr>
            <td>未完成</td>
            <td>開會</td>
            <td>2020/06/08</td>
            <td>高</td>
            <td>李大頭、主任、XX科</td>
            <td>4F會議室</td>
          </tr>
          <tr>
            <td>未完成</td>
            <td>開會</td>
            <td>2020/06/08</td>
            <td>高</td>
            <td>李大頭、主任、XX科</td>
            <td>4F會議室</td>
          </tr>
          <tr>
            <td>未完成</td>
            <td>開會</td>
            <td>2020/06/08</td>
            <td>高</td>
            <td>李大頭、主任、XX科</td>
            <td>4F會議室</td>
          </tr>
        </tbody>
      </table>
  </div>
  
  </body>
  </html>
  ```
 
</body></html>

MarkDown