Bootstarp Navbar kullanımı

Bootstarp Navbar kullanımı

Öncelikle Navbar nedir ?

Navigation bar

Açıklama

İngilizceden çevrilmiştir-Gezinme çubuğu, ziyaretçilerin bilgilere erişmesine yardımcı olmayı amaçlayan bir grafik kullanıcı arabiriminin bir bölümüdür. Gezinme çubukları, dosya tarayıcılarında, web tarayıcılarında ve bazı web sitelerinin tasarım öğesi olarak uygulanmaktadır. Wikipedia (İngilizce)

Kısaca Wikipedia Kaynağına göre web sitelerinde gezinme çubuğu olarak geçer.

Navbar kullanımı:

Bootstrap'ın resmi sitesine gidiyoruz site linki daha sonra docs kısmından navbar bölümüne gidiyoruz .

Ve biraz aşağıya kaydırdıktan sonra orada gözükür.

Resimde örnek bir navbar var şimdi gelelim nasıl bu navbarı sitemize uygulayacağımıza 

<nav class="navbar navbar-expand-lg bg-light"><br />  <div class="container-fluid"><br />    <a class="navbar-brand" href="#">Navbar</a><br />    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><br />      <span class="navbar-toggler-icon"></span><br />    </button><br />    <div class="collapse navbar-collapse" id="navbarSupportedContent"><br />      <ul class="navbar-nav me-auto mb-2 mb-lg-0"><br />        <li class="nav-item"><br />          <a class="nav-link active" aria-current="page" href="#">Home</a><br />        </li><br />        <li class="nav-item"><br />          <a class="nav-link" href="#">Link</a><br />        </li><br />        <li class="nav-item dropdown"><br />          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"><br />            Dropdown<br />          </a><br />          <ul class="dropdown-menu"><br />            <li><a class="dropdown-item" href="#">Action</a></li><br />            <li><a class="dropdown-item" href="#">Another action</a></li><br />            <li><hr class="dropdown-divider"></li><br />            <li><a class="dropdown-item" href="#">Something else here</a></li><br />          </ul><br />        </li><br />        <li class="nav-item"><br />          <a class="nav-link disabled">Disabled</a><br />        </li><br />      </ul><br />      <form class="d-flex" role="search"><br />        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"><br />        <button class="btn btn-outline-success" type="submit">Search</button><br />      </form><br />    </div><br />  </div><br />  
Bu kodları sitemize uyguluyoruz ve bitti. :)

Yazar: Egehan KAHRAMAN

Instagram