iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 7
1
Modern Web

讓0基礎的你也能製作簡單wordpress主題系列 第 7

【Day7】Bootstrap選單看不懂?其實沒你看的那麼難

接下來我們,來完成頂部的選單(bootstrap選單官方教學link)。

我們先來看看完成圖吧:

手機版

手機版選單完成圖

電腦版

電路版選單完成圖

基本選單製作

好,我們首先把已經html學會的,先打好吧。還記得之前我們怎樣說吧,ul 和li能夠製造到選單,那麼我們先把ul 和li 打出來。

<ul>
  <li>
  </li>
</ul>

然後我們希望能夠連去其他頁面,所以我們在裡面放一個之前教過的,可以用來,可以用來放超連結的html碼:<a class=" " href=""></a>

<ul>
  <li>
   <a class="nav-link" href="#">Link</a>
  </li>
</ul>

選單在沒有加入bootstrapclass前的模樣

不過現在這樣子,看起來就只是一個普通的列表,我們需要引入bootstrap,讓這看起來更有選單的模樣。

做法:

我們在<ul>上方加入<nav class="navbar"> ,提示電腦這個是選單,並告訴電腦現在開始使用bootstrap裏的navbar,這樣選單就會跟隨螢幕而改變。

然後加入:<div class="collapse navbar-collapse" >

collapse:無論任何螢幕大小,你都不會看到有選單在頂部。
nav-collapse:當螢幕變小時,選單會改為直行顯示。

接著在nav設定一個breakpoint,讓系統會在甚麼螢幕大小下,改變選單,例如希望在電腦時大螢幕改變的:navbar-expand-lg,最後我們也在,li 內也加入navbar-nav ,讓bootstrap來幫你裝飾一下。

編碼如下:

<nav class="navbar">
 <div class=" collapse navbar-collapse " >
  <ul class="navbar-nav ">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home </a>
    </li>
  </ul>
 </div>
</nav>

這樣好似有模有樣了,既然我們選單有四個項目,我們再在nav裡面,複製三個上面由<li></li>的所有內容,當然<li></li>也要複製進去,並把名字更改好吧,名子即是home那裡。

最基本的bootstrap選單

網頁名稱

不過有個網頁名稱在最前方啊,我們在<div class=" collapse navbar-collapse " >上方,開個超連結,然後加個navbar-brand的class在裡面,這樣就能夠輕鬆地套用到,bootstrap內對於網頁名稱的設定了

編碼節錄:

<nav class="navbar">
 <a class="navbar-brand" href="#">Navbar</a>
  <div class=" collapse navbar-collapse " >
   <ul class="navbar-nav ">

假若想放入圖片,只需要Navbar前加入html插入圖片的編碼img scr 就可以了,當然你想單純只是用圖片,也是可以放棄那個文字啦。

編碼例子

<a class="navbar-brand" href="#">
<img src="/docs/4.5/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="" loading="lazy">Navbar
</a>

這裡可以加入一個 width="" height=""來調節高度和闊度。

另外也可以加入loading="lazy",加快網頁載入速度,要知道,網頁要載入一張圖片,所花的時間,遠遠相比於文字為高,透過這設定,會讓你看到那裡的時候,才幫你下載下來,就好像你看youtube那樣,也是在你看的時候,邊看邊把影片下載,這樣你原先要來等待影片完整下載的時間,也能看影片了,大大時間節省用家時間。以往需要透過javascript的幫助,才能實現的,不過現在輕鬆多了,只需要簡單在html輸入就可以。唯一遺憾的是,暫時不是所有新型瀏覽器都會支援,現時只有edge和chorme是全部支援,firefox則只支援loading="lazy"這功能,其他不支援。

會支援lazy loading html編碼的瀏覽器

現在越來越相像了,對不對?不過,仔細看看,dropdown有個向下的三角形,按一下的時候,下方會有個小選單出現。

bootstrap 的 dropdownmenu

這個就有點複雜了

我們先在dropdown 的 <li class="nav-item ">加入dropdown這個class

編碼節錄:

< li class="navbar-nav dropdown ">

不過我們還需要加入一個功能,讓我們按一下的時候,下面的小選擇就會出來。

按一下就會出來的小選單

這其實類似於連結的概念,不過這次不再是連結新的頁面,而是連結一個小選單,,這讓你按的時候,小選單會出現。由於還是用到連結,所以之前打下的,可以留下來了。

不過要用什麼bootstrap class 呢?我們可以在nav-link後加入 dropdown-toggle

dropdown-toggle:讓電腦知道,這個並不是普通的連結,而是要來連結小選單,讓小選單能夠顯示出來的。

編碼節錄:

<a class="nav-link dropdown-toggle">

不過還沒結束喔,我們需要加入data-toggle="dropdown",data-toggle的意思為,當你按下去後會發生什麼事, dropdown",則是小選單在bootstrap的稱法。這樣小選單就能夠出來了。

編碼節錄:

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" >

因為在bootrap4的版本,dropdown設定為一個button的功能,所以我們也需要加入role=button ,讓這連結,能夠運作起來

編碼節錄:

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" datatoggle="dropdown" >

至於裡面的連結呢?

就像前面那樣,用列表ul li來顯示,並加入需要的超連結就可以了。

不過需要注意的是,我們需要在ul 加入dropdown-menu,以及在li加入dropdown-menu,這樣才能動用到dropdown的bootstrap樣式

編碼節錄:

<ul class="dropdown-menu" >
    <li>
      <a class="dropdown-item" href="#">Action</a>
    </li>

*記緊最後要放</ul>把編碼關好,這裡因為節錄就不放了

然後我們可以加入aria-expanded="false" ,讓視障人士在使用閱讀器時,知道這按鈕並未開啟,並加入aria-haspopup="true",提示他們這裡是有一個小選單在下方

編碼節錄:

<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" datatoggle="dropdown" aria-expanded="false" aria-haspopup="true>

搜尋

bootstrap選單搜尋欄位設定教學

到最後那個搜尋欄位了,因為我們不希望他會和其他選單在一起。假若你在ul內加入了:mr-auto(這個不懂是很正常的,我們明天將會詳細談及,不用擔心),而設定的東西不是放在列表內,根據系統判定,就會自動設定為 justify-content: space-between,他們會自動左右方向為兩邊。所以,我們把它放到列表外,並且在ul內再加入 mr-auto這個class

編碼節錄:

<ul class="navbar-nav mr-auto">

不要怎樣才能設定到這個搜尋系統?這時候我們就要之前並沒有提及到的html:form(表格),不過之前教導過的button其實也是屬於form的一部分就是了。

但,為什麼需要用form?因為我們在搜尋系統需要做的,是輸入我們需要搜尋的字眼,然後按搜尋,命令後端去幫你到資料庫找資料。當涉及到需要用家輸入文字,然後再傳送出去,就會需要用到form了。

我們先開一個form,並加入form-inline的class,讓您的網站輸入字的長方格和按鈕,能夠在同一列:

編碼:

<form class="form-inline">

然後我們處理那個要來輸入文字的長方格了,在html裏,那個方格名為 input ,所以我們先加入<input ,然後像按鈕一樣,我們也要加入type,來告訴系統,這是要來做什麼的,因為這是搜尋用的所以我們加入type="search" ,更多的type可以看這裡

最後我們希望能夠有個較淡色的字,要來指示用家,這是Search,所以在這裡,我們加入placeholder="Search。不過這個輔助字眼,視障人士是看不到的,所以加入aria-label="Search",這樣大家都知道了。

<input class="form-control" type="search" placeholder="Search" aria-label="Search">

到按鈕了,就跟之前一樣去設定按鈕了,不過記緊要吧type="button",轉換為type="search"啊,因為這次是搜尋用,不再是普通的按鈕了。

好,所有基本設定已經完成了。但現在還餘下一個問題。

響應版(RWD)

雖說現在選單會跟著螢幕大小而改變,但當到手機版的時候,卻是完全消失了。

沒有設定icon和選單id前是看不到手機版選單的

我們現在,就來設定吧。

通常,手機版的都是會有個像漢堡包的按鈕,當按一下的時候,選單就會出來。

在brand name 下方,先設定一個按鈕,然後裡面的class設為navbar-toggler

編碼節錄:

<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button"></button>

因為這次按鈕不再是文字,而是一個圖案,所以我們在button裏加一個span,然後class為navbar-toggler-icon,這樣icon就會出來了

編碼節錄:

<button class="navbar-toggler" type="button">
   <span class="navbar-toggler-icon"></span>
</button>

不過這樣還不足夠, 我們在這裡要加入data-toggle="collapse"。這樣,當你按下去時,設定了collapse的項目,就會再次出現。

編碼節錄:

<button class="navbar-toggler" type="button" data-toggle="collapse">

雖然這樣邏輯上是沒問題的,但對於電腦來說,你還需要加設data-target,告訴系統,該命令那個collapse的,再次出現

<button class="navbar-toggler" type="button" data-toggle="collapse data-target="#navbarSupportedContent" >

大家應該還記得,#是要來連接去有相同id的項目吧,為了要讓這編碼能夠實行,我們需要在下方的div裏的編碼,加入id裏加入id="" ,這id叫什麼,當然是可以自己更改的,更改後上方的#後的英文也更改妥當就可以了

<div class="collapse navbar-collapse" id="navbarSupportedContent">

然後我們可以加入aria-expanded="false" ,讓視障人士在使用閱讀器時,知道這按鈕並未開啟。並且加入 aria-label="Toggle navigation",讓他們知道這個為選單按鈕

編碼節錄:

<button class="navbar-toggler" type="button" data-toggle="collapse data-target="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation>

選單顏色

我們可以先在nav內加入之前所教的bg 顏色去改變顏色,並且透過navbar-dark,讓文字在較深色的背景時,也能夠看到

<nav class="navbar navbar-expand-lg bg-info navbar-dark>

固定上方的選單

我們可以透過在nav內加入,fixed-top/sticky-top,讓你選單固定在上方,兩者分別在於,當你使用fixed-top時,並不會因為開啟menu而讓下面向下移動,而sticky-top則會,詳細可參考下圖:

sticky-top
sticky-top

fix-top
sticky-top

總結

雖說大體上是弄好了,不過你會發現,還是有少量問題存在,dropdown menu的顏色並不受影響,而且按鈕太貼近上方。

dropdown menu顏色並不受影響

還有就是,之前設定的文字,也並不會按照螢幕大小改變而改變。

wordpress文字並不設有響應式設計

關於這部分我們明天再探討吧。

今天就到這裡了,至於最後成果的完整編碼,大家可以去按下方的連結查看:

https://www.w3schools.com/code/tryit.asp?filename=GJ5BCXSPJ55P


上一篇
【Day6】用bootstrap的Jumbotrons,顏色,文字調整,以及cards,讓新手的你也能製作簡單的主頁面
下一篇
【Day8】從bootstrap看css優先權,box-model,以及帶你加設響應式文字和Googlefont字體
系列文
讓0基礎的你也能製作簡單wordpress主題30

尚未有邦友留言

立即登入留言