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

第 12 屆 iThome 鐵人賽

DAY 7

Modern Web

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

12th鐵人賽 bootstrap wordpress主題製作新手篇下拉式選單漢堡選單

thewayeasy

2020-09-22 19:59:23

18447 瀏覽

分享至

接下來我們，來完成頂部的選單（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>