iT邦幫忙

2021 iThome 鐵人賽

DAY 20
1
Modern Web

30天以設計+切版實作(Adobe XD、Bootstrap 5)系列 第 20

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

  • 分享至 

  • xImage
  •  

大綱

昨天完成了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
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言