iT邦幫忙

2021 iThome 鐵人賽
DAY 20
1
Modern Web

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列 第 20 篇

【設計+切版30天實作】｜Day20 - Navigation bar - 打破預設的navbar排版

13th鐵人賽 ui bootstrap5 切版 網頁設計
4912 瀏覽

大綱

昨天完成了header的下半部分，今天的任務就要來完成header的上半部分 —— Navigation bar！廢話不多說，馬上開始吧！

數據收集

nav-items樣式：

  • Font-weight：Normal
  • Font-size：16px
  • Text-color：Secondary
    https://ithelp.ithome.com.tw/upload/images/20211004/20139489VD8WbN7hLt.png

navbar的margin：

  • margin-y：24px
  • margin-x：125px
    https://ithelp.ithome.com.tw/upload/images/20211004/20139489flEOLwDfGA.png

navbar裡面的每個nav-items的margin：48px

https://ithelp.ithome.com.tw/upload/images/20211004/20139489KOhiQg43Oc.png

整體分析

  • LOGO與按鈕們是左右平均分配，LOGO在最左、按鈕在最右，所以這邊晚點會使用 justify-content-space-between
  • LOGO與按鈕們是水平置中，所以這邊晚點會使用 align-items-center

步驟

去bootstrap官網複製navbar的code

https://ithelp.ithome.com.tw/upload/images/20211004/20139489Itgd5C13Ce.png

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

因應需求去刪減或新增元件

由於我們只需要「LOGO」以及右方那幾個「按鈕」，所以我們先來把多餘的東西刪掉。（下圖為整理完成所呈現的樣貌）
https://ithelp.ithome.com.tw/upload/images/20211004/20139489PuPEqujKNU.png

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
				<li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
		<button class="btn btn-outline-success" type="submit">Search</button>
  </div>
</nav>

在navbar-brand加入img LOGO

<a class="navbar-brand" href="#">
	<img src="style/PHOTO/logo_light.png" style="height:49px;" alt="GYMATE-logo">
</a>

修改nav-items的code，加入一些margin和文字樣式

<ul class="navbar-nav">
  <li class="nav-item me-lg-9">
    <a class="nav-link fw-light" href="#">常見問題</a>
  </li>
  <li class="nav-item me-lg-9">
    <a class="nav-link fw-light" href="#">註冊</a>
  </li>
  <li class="nav-item me-lg-9">
    <a class="nav-link fw-light" href="#">登入</a>
  </li>
</ul>

響應式樣式

當小於1280的螢幕去瀏覽網頁時，通常就會出現以下的樣式 → 漢堡選單、LOGO置中、按鈕維持在置右（如下圖顯示）
漢堡選單是當頁面縮到一定的尺寸（自行設定）時會把指定的元件收在漢堡裡，那這邊會直接把上面的nav-items code複製下來，並新增漢堡選單的code。
https://ithelp.ithome.com.tw/upload/images/20211004/20139489vEqyUCooXi.png

  1. 把下方兩段code加入<nav>，並新增margin-top

    <!-- 這個是漢堡選單的icon -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

    <!-- 這個是當響應式時藏在漢堡選單裡的nav-items，會放在ul>li的外層喔 -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">...</div>

  2. 形成下方的code

    <!-- 記得在navbar裡要加入bg-transparent（透明）喔！ -->
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent p-0 mt-6">
  <div class="container-xl">

			<!-- 漢堡icon： -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>

			<!-- LOGO：在瀏覽器縮放成md的尺寸時才要置中，因此加入'justify-content-md-center' -->
      <div class="justify-content-md-center"> 
          <a class="navbar-brand" href="#"><img src="style/PHOTO/logo_light.png" style="height:49px;" alt="GYMATE-logo"></a>   
      </div>

			<!-- 選單列：由於要讓它靠右開始，所以在外層加入'justify-content-lg-end' -->
      <div class="collapse navbar-collapse justify-content-lg-end " id="navbarSupportedContent">
          <ul class="navbar-nav">
              <li class="nav-item me-lg-8">
                  <a class="nav-link" href="#">常見問題</a>
              </li>
              <li class="nav-item me-lg-8">
                  <a class="nav-link" href="#">註冊</a>
              </li>
              <li class="nav-item me-lg-8">
                  <a class="nav-link" href="#">登入</a>
              </li>
          </ul>
      </div> 

			<!-- 因為btn沒有包在漢堡選單裡，所以這邊幫它獨立分開放 -->
      <button class="btn btn-primary" type="submit">免費試用</button>   

  </div>
</nav>

這樣就完成了，以下來作個對比

（下圖的navbar為bg-dark時的樣子，不是bg-transparent時，請不要介意-v-）

＊在電腦版時不會有太大的分別，但在縮放時差別就會出現了！

  • 電腦版（上為沒有RWD，下為有作RWD）
    https://ithelp.ithome.com.tw/upload/images/20211004/20139489sp8ULt4yKj.png

  • 縮放至平板尺寸（上為沒有RWD，下為有作RWD）
    https://ithelp.ithome.com.tw/upload/images/20211004/20139489RC8mvVgVxv.png

  • 響應式的漢堡選單列
    https://ithelp.ithome.com.tw/upload/images/20211004/20139489UDxgOv20l0.png

最後，do re mi fa so！把以上nav的code放進昨天的section裡就完成了

<section class="intro heroheader">
	<div class="container">

		<!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-transparent pt-6">
      <div class="container-xl">
				
				<!-- 漢堡選單 -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
				
				<!-- LOGO -->
        <div class="justify-content-md-center">
	        <a class="navbar-brand" href="#">
						<img src="style/PHOTO/logo_light.png" alt="GYMATE-logo">
					</a>   
        </div>
	
				<!-- nav-items -->
        <div class="collapse navbar-collapse justify-content-lg-end " id="navbarSupportedContent">
	        <ul class="navbar-nav">
            <li class="nav-item me-lg-9">
              <a class="nav-link fw-light" href="#">常見問題</a>
            </li>
            <li class="nav-item me-lg-9">
              <a class="nav-link fw-light" href="#">註冊</a>
            </li>
            <li class="nav-item me-lg-9">
              <a class="nav-link fw-light" href="#">登入</a>
            </li>
	        </ul>
        </div>
			 
				<!-- btn -->
        <button class="btn btn-primary fw-light" type="submit">免費試用</button>   

	    </div>
		</nav>
	
		<!-- 標題、內容、input、btn -->
    <div class="row justify-content-lg-end hero-margin">
      <div class="col-lg-7 ">
        <h1 class="text-secondary">自由教練，離你不遠！</h1>
        <p class="text-secondary fs-4 fw-light">在這個預約系統裡，你們可以在「學員配對區」尋找符合自己要求的學員進行配對，預約成功後，在預訂時間與學員相約在健身場地進行教學就可以了！</p>
        <input class="py-3 ps-6 bg-transparent border-1 border-secondary me-5" style="width: 73%;" type="text" placeholder="Enter your email address ...">
        <button class="btn btn-primary py-3 border-0 fw-light">立即註冊</button>    
      </div>
    </div>

	</div>
</section>

登登登登，header的區塊就完成啦！明天再來切下一個區塊吧 (๑´ㅂ`๑)

https://ithelp.ithome.com.tw/upload/images/20211004/20139489q6JwHZCqwa.png


上一篇
【設計+切版30天實作】｜Day19 - 切版 - Heroheader - 怎麼切出滿版heroheader？
下一篇
【設計+切版30天實作】｜Day21 - PainPoints - 怎麼切出標題底下的highlight 裝飾?
系列文
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 共 30 篇
  1. 26
    【設計+切版30天實作】｜Day26 - Reviews區塊 - 卡片可以因應不同用途而千變萬化
  2. 27
    【設計+切版30天實作】｜Day27 - Plans區塊 - 怎麼做出背景陰影？原來陰影還可以調數據！
  3. 28
    【設計+切版30天實作】｜Day28 - CTA區塊 - 超快速切出簡約CTA，讓使用者註冊起來！！
  4. 29
    【設計+切版30天實作】｜Day29 - Footer區塊 - 切出最後一步，看似不起眼但必須存在的footer
  5. 30
    【設計+切版30天實作】｜Day30 - 最後一天了嗚嗚嗚的30天參賽心得
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙