下面的程式碼整個複製之後就會產出上面的結果

有些看不懂沒關係，可以根據前面教的標籤去客製化個人頁面

工程師大部分的工作都是複製貼上

你只需要找到對的地方，去改成你要的樣子

  1. <!doctype html>
  2. <html lang="en">
  3.  
  4.     <head>
  5.         <!--====== Style css ======-->
  6.         <link rel="stylesheet" href="css/style.css">
  7.         <!-- Required meta tags -->
  8.         <meta charset="utf-8">
  9.         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  10.         <!-- Bootstrap CSS -->
  11.         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  12.         <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  13.         <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  14.         <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  15.         <!-- 上面是函式庫，他的好處是很輕量，超好用，有興趣的人可以自己去看原始碼，這邊記得要貼下面才會動 -->
  16.         <title>navBar實作篇</title>
  17.     </head>
  18.  
  19.     <body>
  20.     <!-- NavBar  -->
  21. <nav id="index_top"class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
  22.   <!-- 如果fixed-top拿掉就不會定格在視窗最上面，而是會因為滾動消失  -->
  23.     <!-- bs的navbar也有dark版本，你可以試著改看看  -->
  24.   <a class="navbar-brand" href="">ＯＯＯ的個人網頁
  25.     <!-- 你也可以在這邊使用<img>標籤，放你自己的logo，如果不會就去首頁按F12，參考我是怎麼做的  -->
  26.   </a>
  27.   <!-- 下面這個button平常看不到，只有響應式的時候才看得到  -->
  28.   <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>
  29.   <!-- button_end  -->
  30.   <div class="collapse navbar-collapse" id="navbarSupportedContent">
  31.     <ul class="navbar-nav mr-auto">
  32.       <!-- active代表現在聚焦在這，你會發現拿掉之後，顏色會變淡  -->
  33.       <li class="nav-item active">
  34.         <a class="nav-link " href="#index_top">首頁<span class="sr-only">(current)</span></a>      
  35.       </li>
  36.       <li class="nav-item">
  37.         <a class="nav-link" href="#bottom">頁內跳轉</a>
  38.       </li>
  39.       <li class="nav-item">
  40.         <a target="_blank" class="nav-link" href="#外部連結">外部連結</a>
  41.       </li>
  42.       <li class="nav-item dropdown">
  43.         <a class="nav-link dropdown-toggle " href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">下拉式選單</a>
  44.         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  45.           <a class="dropdown-item " href="#跳到哪">選項一</a>
  46.           <a class="dropdown-item " href="#跳到哪">選項二</a>
  47.           <a class="dropdown-item " href="#跳到哪">選項三</a>
  48.           <div class="dropdown-divider"></div>
  49.           <a class="dropdown-item " href="#">其他一</a>
  50.           <a class="dropdown-item" href="#">其他二</a>
  51.         </div>
  52.       </li>
  53.       <li class="nav-item">
  54.         <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">補充文字（不能點）</a>
  55.       </li>
  56.     </ul>
  57.     <form class="form-inline my-2 my-lg-0">
  58.       <input class="form-control mr-sm-2" type="search" placeholder="這裡叫做placeholder" aria-label="Search">
  59.       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  60.     </form>
  61.   </div>
  62. </nav>
  63. <!-- 如果這裡的範例你不喜歡，可以去『https://getbootstrap.com/docs/4.5/components/navbar/』看看-->
  64.  
  65. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  66.  
  67.     </body>
  68.  
  69. </html>
回首頁