Source

ꯅꯕꯕꯔ꯫

ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯁꯛꯇꯤ ꯂꯩꯕꯥ, ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯍꯦꯗ, ꯅꯦꯚꯕꯥꯔꯒꯤꯗꯃꯛ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯣꯂꯥꯞꯁ ꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯁꯄꯣꯔꯠ ꯌꯥꯑꯣꯅꯥ ꯕ꯭ꯔꯥꯟꯗꯤꯡ, ꯅꯦꯚꯤꯒꯦꯁꯟ, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥꯒꯤ ꯁꯄꯣꯔꯠ ꯌꯥꯑꯣꯔꯤ꯫

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯅꯕꯕꯥꯔ ꯑꯁꯤ ꯍꯧꯗ꯭ꯔꯤꯉꯩꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯈꯪꯖꯤꯅꯒꯗꯕꯥ ꯋꯥꯐꯃꯁꯤꯡ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀꯣꯂꯥꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯂꯔ ꯁ꯭ꯀꯤꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯅꯕꯕꯥꯔꯁꯤꯡꯒꯥ .navbarꯂꯣꯌꯅꯅꯥ ꯔꯦꯄꯤꯡ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ꯫.navbar-expand{-sm|-md|-lg|-xl}
ꯅꯕꯕꯥꯔꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯈꯣꯌꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯐ꯭ꯂꯨꯏꯗ ꯑꯣꯏ꯫ ꯃꯈꯣꯌꯒꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯋꯥꯏꯗ ꯑꯗꯨ ꯂꯤꯃꯤꯠ ꯇꯧꯅꯕꯥ ꯑꯣꯄꯁꯅꯦꯜ ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯅꯦꯚꯕꯥꯔꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯁ꯭ꯄꯦꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯑꯩꯈꯣꯌꯒꯤ ꯁ꯭ꯄꯦꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯐ꯭ꯂꯦꯛꯁ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫
ꯅꯦꯚꯕꯥꯔꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏ, ꯑꯗꯨꯕꯨ ꯃꯗꯨ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌꯕꯨ ꯐꯖꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯕꯤꯍꯦꯕꯤꯌꯔ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯀꯣꯂꯥꯞꯁ ꯖꯥꯚꯥꯁ꯭ꯛꯔꯤꯞꯇ ꯄ꯭ꯂꯒꯏꯅꯒꯤ ꯃꯈꯥ ꯄꯣꯜꯂꯤ꯫
ꯄ꯭ꯔꯤꯟꯇ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯅꯦꯚꯕꯥꯔꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫ ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ ꯍꯥꯄꯆꯤꯟꯗꯨꯅꯥ ꯄ꯭ꯔꯤꯟꯇ ꯇꯧꯅꯕꯥ ꯐꯣꯔꯁ .d-printꯇꯧꯕꯥ .navbar. ꯗꯤꯁꯞꯂꯦ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯌꯦꯡꯎ꯫
ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯑꯦꯛꯁꯦꯁꯤꯕꯤꯂꯤꯇꯤ ꯁꯣꯌꯗꯅꯥ ꯂꯩꯍꯅꯕꯥ <nav>ꯅꯠꯠꯔꯒꯥ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯍꯦꯟꯅꯥ ꯖꯦꯅꯦꯔꯦꯜ ꯑꯣꯏꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯔꯕꯗꯤ , ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯂꯦꯟꯗꯃꯥꯔꯛ ꯔꯤꯖꯟ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯈꯉꯗꯣꯛꯅꯕꯥ ꯅꯦꯚꯕꯥꯔ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ <div>a ꯍꯥꯄꯆꯤꯅꯕꯥ꯫role="navigation"

ꯈꯨꯗꯝ ꯑꯃꯥ ꯑꯃꯁꯨꯡ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤꯕꯥ ꯁꯕ-ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡꯒꯤ ꯂꯤꯁ꯭ꯇꯀꯤꯗꯃꯛꯇꯥ ꯃꯈꯥ ꯇꯥꯅꯥ ꯄꯥꯕꯤꯌꯨ꯫

ꯁꯄꯣꯔꯠ ꯇꯧꯕꯥ ꯀꯟꯇꯦꯟꯇ꯫

ꯅꯕꯕꯥꯔꯁꯤꯡ ꯑꯁꯤ ꯁꯕ-ꯀꯝꯄꯣꯅꯦꯟꯇ ꯈꯔꯒꯤꯗꯃꯛ ꯕꯤꯜꯇ-ꯏꯟ ꯁꯄꯣꯔꯇꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯏ꯫ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯗꯒꯤ ꯈꯜꯂꯨ:

.navbar-brandꯅꯍꯥꯛꯀꯤ ꯀꯝꯄꯅꯤ, ꯄ꯭ꯔꯗꯛꯇ, ꯅꯠꯠꯔꯒꯥ ꯄ꯭ꯔꯣꯖꯦꯛꯇꯀꯤ ꯃꯃꯤꯡꯒꯤꯗꯃꯛ꯫
.navbar-navꯃꯄꯨꯡ ꯑꯣꯏꯕꯥ ꯑꯋꯥꯡꯕꯥ ꯑꯃꯁꯨꯡ ꯂꯥꯏꯠꯋꯦꯠ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯑꯃꯒꯤꯗꯃꯛ (ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯁꯄꯣꯔꯠ ꯌꯥꯎꯅꯥ)꯫
.navbar-togglerꯑꯩꯈꯣꯌꯒꯤ ꯀꯣꯂꯥꯞꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯃꯁꯨꯡ ꯑꯇꯣꯞꯄꯥ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯇꯣꯒꯂꯤꯡ ꯕꯤꯍꯦꯕꯤꯌꯔꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯒꯤꯗꯃꯛ꯫
.form-inlineꯐꯔꯝ ꯑꯃꯍꯦꯛꯇꯒꯤ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯑꯦꯛꯁꯅꯁꯤꯡꯒꯤꯗꯃꯛ꯫
.navbar-textꯇꯦꯛꯁꯇꯀꯤ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯣꯏꯅꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯕꯥ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡ ꯍꯥꯄꯆꯤꯟꯅꯕꯒꯤꯗꯃꯛ꯫
.collapse.navbar-collapseꯃꯃꯥ-ꯃꯄꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯃꯅꯥ ꯅꯦꯚꯕꯥꯔ ꯀꯟꯇꯦꯟꯇꯁꯤꯡ ꯒ꯭ꯔꯨꯞ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯂꯣꯠꯁꯤꯅꯕꯒꯤꯗꯃꯛ꯫

lgꯃꯈꯥꯗꯥ (ꯑꯆꯧꯕꯥ) ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯇꯥ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯁꯣꯀꯍꯜꯂꯤꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯂꯥꯏꯠ-ꯊꯤꯝ ꯅꯦꯚꯕꯥꯔ ꯑꯃꯗꯥ ꯌꯥꯑꯣꯔꯤꯕꯥ ꯁꯕ-ꯀꯝꯄꯣꯅꯦꯟꯇ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯈꯨꯗꯝ ꯑꯃꯥ ꯄꯤꯔꯤ꯫

<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>

ꯈꯨꯗꯝ ꯑꯁꯤꯅꯥ ꯃꯆꯨ ( bg-light) ꯑꯃꯁꯨꯡ ꯁ꯭ꯄꯦꯁꯤꯡ ( my-2, my-lg-0, mr-sm-0, my-sm-0) ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯃꯃꯤꯡ

.navbar-brandꯑꯌꯥꯝꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯗꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯑꯗꯨꯕꯨ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯈꯔꯗꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭��ꯥꯁ ꯅꯠꯠꯔꯒꯥ ꯀꯁ꯭ꯇꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯑꯦꯉ꯭ꯀꯔ ꯑꯃꯅꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯊꯕꯛ ꯇꯧꯏ꯫

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

ꯏꯃꯦꯖꯁꯤꯡꯗꯥ ꯏꯃꯦꯖꯁꯤꯡ ꯍꯥꯄꯆꯤꯅꯕꯅꯥ .navbar-brandꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯁꯥꯏꯖ ꯇꯧꯅꯕꯥ ꯀꯁ꯭ꯇꯝ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ꯫ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤ ꯎꯠꯅꯕꯥ ꯈꯨꯗꯝ ꯈꯔꯥ ꯄꯤꯔꯤ꯫

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/docs/4.0/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

ꯅꯚ

ꯅꯕꯕꯥꯔ ꯅꯦꯚꯤꯒꯦꯁꯟ ꯂꯤꯉ꯭ꯀꯁꯤꯡ .navꯑꯁꯤ ꯃꯈꯣꯌꯒꯤ ꯃꯁꯥꯒꯤ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯑꯣꯄꯁꯅꯁꯤꯡꯗꯥ ꯁꯦꯃꯒꯠꯂꯤ ꯑꯃꯁꯨꯡ ꯃꯑꯣꯡ ꯆꯨꯝꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯇꯣꯒꯂꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯅꯕꯕꯥꯔꯁꯤꯡꯗꯥ ꯅꯦꯚꯤꯒꯦꯁꯅꯁꯨ ꯅꯍꯥꯛꯀꯤ ꯅꯕꯕꯥꯔꯒꯤ ꯀꯟꯇꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯁꯦꯛꯌꯨꯑꯣꯔ ꯑꯣꯏꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯌꯥꯔꯤꯕꯃꯈꯩ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯁ꯭ꯄꯦꯁ ꯂꯧꯅꯕꯥ ꯍꯦꯅꯒꯠꯂꯛꯀꯅꯤ꯫

ꯑꯦꯛꯇꯤꯕ ꯁ꯭ꯇꯦꯠꯁꯤꯡ—ꯒꯥ ꯂꯣꯌꯅꯅꯥ .active—ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯄꯦꯖ ꯑꯁꯤ ꯇꯥꯛꯅꯕꯥ .nav-links ꯅꯠꯠꯔꯒꯥ ꯃꯈꯣꯌꯒꯤ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯃꯃꯥ-ꯃꯄꯥ .nav-items ꯗꯥ ꯍꯀꯊꯦꯡꯅꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

<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="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯅꯦꯚꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯑꯗꯣꯝꯅꯥ ꯄꯥꯝꯂꯕꯗꯤ ꯂꯤꯁ꯭ꯇꯇꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯥ ꯑꯦꯞꯔꯣꯆ ꯑꯁꯤ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯂꯧꯊꯣꯀꯄꯥ ꯌꯥꯒꯅꯤ꯫

<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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

ꯅꯍꯥꯛꯀꯤ ꯅꯕꯕꯥꯔ ꯅꯦꯚꯗꯥ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯅꯁꯤꯡꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ ꯗ꯭ꯔꯣꯄꯗꯥꯎꯟ ꯃꯦꯅꯨꯁꯤꯡꯗꯥ ꯄꯣꯖꯤꯁꯟ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯔꯦꯄꯤꯡ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯑꯗꯨꯒꯤꯗꯃꯛ .nav-itemꯑꯃꯁꯨꯡ .nav-linkꯃꯈꯥꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯇꯣꯉꯥꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯁꯣꯏꯗꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫

<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

ꯐꯣꯔꯃꯁꯤꯡ꯫

ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯐꯣꯔꯝ ꯀꯟꯠꯔꯣꯂꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯅꯕꯕꯥꯔ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ .form-inline.

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <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>
</nav>

ꯅꯍꯥꯛꯀꯤ ꯏꯅꯂꯥꯏꯟ ꯐꯣꯔꯃꯁꯤꯡꯒꯤ ꯃꯆꯥꯀꯁꯤꯡ ꯑꯗꯨ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧ꯫

<nav class="navbar navbar-light bg-light justify-content-between">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <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>
</nav>

ꯏꯅꯄꯨꯠ ꯒ꯭ꯔꯨꯄꯁꯤꯡꯅꯥ ꯊꯕꯛ ꯇꯧꯏ, ꯃꯈꯣꯌꯁꯨ:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯕꯇꯅꯁꯤꯡ ꯑꯁꯤꯁꯨ ꯅꯕꯕꯥꯔ ꯐꯣꯔꯃꯁꯤꯡ ꯑꯁꯤꯒꯤ ꯁꯔꯨꯛ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫ ꯃꯁꯤꯅꯥ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯁꯥꯏꯖꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯗꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ ꯍꯥꯌꯕꯒꯤ ꯑꯆꯧꯕꯥ ꯅꯤꯡꯁꯤꯡꯕꯥ ꯑꯃꯁꯨ ꯑꯣꯏꯔꯤ꯫

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

ꯃꯌꯦꯛ

ꯅꯦꯚꯕꯥꯔꯁꯤꯡꯗꯥ ꯃꯇꯦꯡꯅꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯕꯤꯠꯁꯤꯡ ꯌꯥꯑꯣꯕꯥ ꯌꯥꯏ .navbar-text. ꯀ꯭ꯂꯥꯁ ꯑꯁꯤꯅꯥ ꯇꯦꯛꯁꯇꯀꯤ ꯁ꯭ꯠꯔꯤꯡꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯁ꯭ꯄꯦꯁꯤꯡ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯏ꯫

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯑꯇꯩ ꯀꯝꯄꯣꯅꯦꯟꯇꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯤꯛꯁ ꯑꯃꯁꯨꯡ ꯃꯦꯆ ꯇꯧ꯫

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ text</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarText">
    <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

ꯃꯆꯨꯒꯤ ꯁ꯭ꯀꯤꯃꯁꯤꯡ꯫

ꯊꯤꯃꯤꯡ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯃꯁꯨꯡ background-colorꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯀꯝꯕꯤꯅꯦꯁꯟ ꯑꯁꯤꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯅꯕꯕꯥꯔ ꯑꯁꯤ ꯊꯤꯝ ꯇꯧꯕꯗꯥ ꯀꯩꯗꯧꯉꯩꯗꯁꯨ ꯍꯦꯟꯅꯥ ꯂꯥꯌꯕꯥ ꯑꯣꯏꯈꯤꯗ꯭ꯔꯤ꯫ .navbar-lightꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯃꯆꯨꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯅꯕꯒꯤꯗꯃꯛ, ꯅꯠꯠꯔꯒꯥ .navbar-darkꯃꯌꯦꯛ ꯁꯦꯡꯕꯥ ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ ꯃꯆꯨꯁꯤꯡꯒꯤꯗꯃꯛ ꯈꯜꯂꯨ꯫ .bg-*ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ, ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ꯫

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

.containerꯃꯁꯤ ꯃꯊꯧ ꯇꯥꯗ꯭ꯔꯕꯁꯨ, ꯅꯍꯥꯛꯅꯥ ꯄꯦꯖ ꯑꯃꯗꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯅꯕꯥ ꯅꯦꯚꯕꯥꯔ ꯑꯃꯥ ꯔꯦꯞ ꯇꯧꯕꯥ ꯌꯥꯏ ꯅꯠꯠꯔꯒꯥ ꯐꯤꯛꯁ ꯅꯠꯠꯔꯒꯥ ꯁ꯭ꯇꯦꯇꯤꯛ ꯇꯣꯞ ꯅꯦꯚꯕꯥꯔ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯀꯟꯇꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯈꯛꯇꯗꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯅꯕꯥ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ .

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

.navbar-expand{-sm|-md|-lg|-xl}ꯀꯟꯇꯦꯅꯔ ꯑꯗꯨ ꯅꯍꯥꯛꯀꯤ ꯅꯦꯚꯕꯥꯔꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯃꯇꯃꯗꯥ, ꯃꯁꯤꯒꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯄꯦꯗꯤꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯀ꯭ꯂꯥꯁꯇꯒꯤ ꯍꯦꯟꯅꯥ ꯅꯦꯝꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡꯗꯥ ꯂꯧꯊꯣꯀꯏ꯫ ꯃꯁꯤꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯅꯦꯚꯕꯥꯔ ꯑꯗꯨ ꯊꯨꯒꯥꯏꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯂꯣꯌꯔꯕꯥ ꯚꯤꯎꯄꯣꯔꯇꯁꯤꯡꯗꯥ ꯃꯊꯧ ꯇꯥꯗꯅꯥ ꯄꯦꯗꯤꯡ ꯇꯧꯕꯗꯥ ꯗꯕꯜ ꯇꯧꯗꯦ ꯍꯥꯌꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯊꯝꯂꯤ꯫

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

ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

ꯅꯟ-ꯁ꯭ꯇꯦꯇꯤꯛ ꯄꯣꯖꯤꯁꯅꯁꯤꯡꯗꯥ ꯅꯕꯕꯥꯔꯁꯤꯡ ꯊꯝꯅꯕꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯄꯣꯖꯤꯁꯟ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯊꯛꯇꯥ ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ, ꯃꯈꯥꯗꯥ ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ, ꯅꯠꯠꯔꯒꯥ ꯃꯊꯛꯇꯥ ꯂꯦꯞꯂꯕꯥ (ꯃꯊꯛꯇꯥ ꯌꯧꯔꯛꯠꯔꯤꯐꯥꯎꯕꯥ ꯄꯦꯖ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯛꯔꯣꯜ ꯇꯧꯏ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯃꯐꯃꯗꯨꯗꯥ ꯂꯩꯒꯅꯤ) ꯑꯗꯨꯗꯒꯤ ꯈꯜꯂꯨ꯫ ꯐꯤꯛꯁ ꯇꯧꯔꯕꯥ ꯅꯦꯚꯕꯥꯔꯁꯤꯡꯅꯥ ꯁꯤꯖꯤꯟꯅꯩ position: fixed, ꯍꯥꯌꯕꯗꯤ ꯃꯈꯣꯌ ꯑꯁꯤ DOMꯒꯤ ꯅꯣꯔꯃꯦꯜ ꯐ꯭ꯂꯣꯗꯒꯤ ꯄꯨꯊꯣꯀꯏ ꯑꯃꯁꯨꯡ ꯑꯇꯣꯞꯄꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯥ ꯑꯣꯚꯔꯂꯦꯞ ꯇꯧꯕꯥ ꯊꯤꯡꯅꯕꯥ ꯀꯁ꯭ꯇꯝ CSS (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ) padding-topꯃꯊꯧ ꯇꯥꯕꯥ ꯌꯥꯏ꯫<body>

ꯃꯁꯤꯗꯁꯨ ꯅꯠꯇꯅꯥ ꯈꯉꯖꯤꯅꯕꯤꯌꯨ ꯃꯗꯨꯗꯤ .sticky-topꯁꯤꯖꯤꯟꯅꯔꯤ position: sticky, ꯃꯁꯤ ꯕ꯭ꯔꯥꯎꯖꯔ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯃꯄꯨꯡ ꯐꯥꯅꯥ ꯁꯄꯣꯔꯠ ꯇꯧꯗꯦ .

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯂꯃꯆꯠ-ꯁꯥꯖꯠꯁꯤꯡ꯫

ꯅꯦꯚꯕꯥꯔꯁꯤꯡꯅꯥ ꯃꯈꯣꯌꯒꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯕꯇꯟ ꯑꯃꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯊꯨꯒꯥꯏꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ .navbar-toggler, .navbar-collapse, ꯑꯃꯁꯨꯡ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫ .navbar-expand{-sm|-md|-lg|-xl}ꯑꯇꯣꯞꯄꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯑꯗꯣꯝꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯀꯗꯥꯏꯗꯥ ꯎꯠꯀꯗꯒꯦ ꯅꯠꯔꯒꯥ ꯂꯣꯠꯀꯗꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯐꯖꯅꯥ ꯈꯅꯕꯥ ꯌꯥꯏ꯫

ꯀꯩꯗꯧꯉꯩꯗꯥ ꯊꯨꯒꯥꯏꯔꯣꯏꯗꯕꯥ ꯅꯚꯕꯥꯔꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, ꯅꯚꯕꯥꯔꯗꯥ .navbar-expandꯀ꯭ꯂꯥꯁ ꯑꯗꯨ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯊꯨꯒꯥꯏꯔꯤꯕꯥ ꯅꯕꯕꯥꯔꯁꯤꯡꯒꯤ ꯑꯣꯏꯅꯗꯤ, .navbar-expandꯀ꯭ꯂꯥꯁ ꯑꯃꯠꯇꯥ ꯍꯥꯄꯂꯣꯏꯗꯕꯅꯤ꯫

ꯇꯣꯒꯂꯔ ꯑꯣꯏꯕꯥ꯫

ꯅꯦꯚꯕꯥꯔ ꯇꯣꯒꯂꯔꯁꯤꯡ ꯑꯁꯤ ꯗꯤꯐꯣꯜꯇ ꯑꯣꯏꯅꯥ ꯂꯦꯞꯇꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯏ, ꯑꯗꯨꯕꯨ ꯃꯈꯣꯌꯅꯥ ,ꯒꯨꯝꯕꯥ ꯃꯔꯨꯞ-ꯃꯄꯥꯡ ꯑꯣꯏꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯇꯨꯡ ꯏꯟꯔꯕꯗꯤ .navbar-brand, ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯌꯥꯝꯅꯥ ꯑꯔꯣꯏꯕꯥ ꯃꯐꯃꯗꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯒꯅꯤ꯫ ꯅꯍꯥꯛꯀꯤ ꯃꯥꯔꯀꯑꯞ ꯑꯗꯨ ꯔꯤꯚꯔꯁ ꯇꯧꯕꯅꯥ ꯇꯣꯒꯂꯔ ꯑꯗꯨꯒꯤ ꯄ꯭ꯂꯦꯁꯃꯦꯟꯇ ꯑꯗꯨ ꯔꯤꯚꯔꯁ ꯇꯧꯒꯅꯤ꯫ ꯃꯈꯥꯗꯥ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯇꯣꯒꯜ ꯁ꯭ꯇꯥꯏꯂꯁꯤꯡꯒꯤ ꯈꯨꯗꯃꯁꯤꯡ ꯄꯤꯔꯤ꯫

.navbar-brandꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯅꯦꯝꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯇꯥ ꯎꯠꯄꯥ ꯂꯩꯇꯅꯥ :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <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">
        <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>

ꯑꯔꯣꯏꯕꯗꯥ ꯎꯠꯂꯤꯕꯥ ꯕ꯭ꯔꯥꯟꯗ ꯅꯦꯝ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯗꯥ ꯇꯣꯒꯂꯔ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ:

<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="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <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">
        <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">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯑꯗꯨꯗꯥ ꯇꯣꯒꯂꯔ ꯑꯃꯥ ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯗꯥ ꯕ꯭ꯔꯥꯟꯗ ꯅꯦꯝ ꯑꯃꯥ ꯌꯥꯎꯔꯒꯥ:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <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">
        <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>

ꯃꯄꯥꯅꯒꯤ ꯀꯟꯇꯦꯟꯇ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯄꯦꯖ ꯑꯗꯨꯒꯤ ꯑꯇꯣꯞꯄꯥ ꯃꯐꯝ ꯑꯃꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯇ꯭ꯔꯤꯒꯔ ꯇꯧꯅꯕꯥ ꯀꯣꯂꯥꯞꯁ ꯄ꯭ꯂꯒꯏꯟ ꯑꯗꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯄꯥꯝꯃꯤ꯫ ꯃꯔꯃꯗꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯄ꯭ꯂꯒꯏꯟ ꯑꯁꯤꯅꯥ idꯑꯃꯁꯨꯡ data-targetꯃꯦꯆꯤꯡꯗꯥ ꯊꯕꯛ ꯇꯧꯏ, ꯃꯗꯨ ꯐꯖꯅꯥ ꯇꯧꯏ!

Collapsed content

Toggleable via the navbar brand.

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>