# Navbar

```css
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
```

* **.navbar** 初始設定
* **.navbar-expand { -sm|-md|-lg|-xl }** 設定 navbar 變成 hamberger menu 的 breakpoint。
* **.navbar{ -light|-dark }** 設定 navbar 的字體顏色 (白黑)
* **.bg { -\* }** navbar 的背景顏色身配淺淺配深
* navbar 預設不會被列印出來，可以加上 .d-print 改變。
* navbar 通常搭配 \<nav> 使用，如果使用其他 tag 像 \<div> 則須加上 role="navigation" 作為標誌。

## Supported content

* **.navbar-brand** 放商標、公司名稱、專案名稱等等。
* **.navbar-nav** 導覽列
* **.navbar-toggler** 控制 hamberger menu。
* **.collapse .navbar-collapse**  hamberger menu 組成的內容。

### Brand

**.navbar-brand** 可以用在大多數的元素，但 **\<a>** 的效果最好，其他元素可能需要用 class 或改變 style。\
放在 **\<img>** 需要增加一些 class，改變樣式。

### Nav

* **.active** 可以放在 **.nav-item** 或 **.nav-link** 加上 **\<span> .sr-only** 給茫視野使用。
* 可以拿掉 **\<ul> \<li>** 只用 **\<a>** 組成。
* 可以使用下拉式選單，注意巢狀寫法。

## Containers

```css
<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>
```

包在 navbar 外面表示整個 navbar 會置中

```css
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>
```

包在 navbar 裡面表示只有內容會置中


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mistborn.gitbook.io/til-coding/bootstrap/navbar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.