[Bootstrap 기초] 5. Navbar , Icon

 

NavBar

 

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <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="#">Menu1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Menu3</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

 

 

 

 

## Disabled
<li class="nav-item">
     <a class="nav-link disabled" aria-disabled="true">Disabled</a>
</li>


## Current Page
<li class="nav-item">
  <a class="nav-link active" aria-current="page" href="#">Home</a>
</li>


## DropDown
<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown link
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</li>


## Form
<form class="d-flex" role="search">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>

## Text Message
<span class="navbar-text">
  Navbar text with an inline element
</span>

 

 

Theme

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

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

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

 

 

Fix Top

<nav class="navbar fixed-top bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>

 

 

Fix Bottom

<nav class="navbar fixed-bottom bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>

 

Stickey Top

<nav class="navbar sticky-top bg-body-tertiary">
	<div class="container-fluid">
	  <a class="navbar-brand" href="#">Sticky top</a>
	</div>
</nav>

 

Stickey Top

<nav class="navbar sticky-bottom bg-body-tertiary">
	<div class="container-fluid">
	  <a class="navbar-brand" href="#">Sticky top</a>
	</div>
</nav>

 

 

 

 

Tab Nav

 

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

 

 

 

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

 

 

 

 

<ul class="nav nav-underline">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</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>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>

 

 

 

ICON

 

 

 

<svg width="16" height="16" class="bi bi-emoji-heart-eyes">


<i class="bi bi-airplane"></i>


<div class=" btn btn-success bi bi-filetype-xlsx"> DownLoad</div>