:::
prev3-2 表格
3-4 表單next
PHP從入門到放棄實戰班

3-3 導覽列

  1. 快速產生
    在 Visual Studio Code 中輸入b4-navbar-b( b4-navbar-background：Bootstrap NavBar元件 ) 按 Enter 可以快速產生導覽列的語法。
  2. 基本程式碼 
    <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. 加入圖片 
    <img src="images/logo.jpg" class="rounded-circle" width="100%" height="200rem" alt="logo">

     

  5. 欄位推移
    • .mr-auto 來將右邊剩下的空位謄出來。
    • .mx-auto 把空位平均分散到左右兩邊 。
    • .ml-auto 把空位放到左邊 。 
      <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，記得引入 
      <script src="js/bootstrap.min.js"></script>
      <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 
      <script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
  7. 程式碼 
    <!DOCTYPE html>
<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>

     

prev3-2 表格
3-4 表單next

友善列印 & 下載 PDF 匯出 MarkDown 格式