Bootstrap Nav Sınıfının Kullanımı

nhtctn nhtctn

Bootstrap 4 ile Navs yani bir menü oluşturmak için .nav sınıfına sahip <ul> etiketi içine ekleyeceğiniz her bir <li> etiketine .nav-item ve her bir <li> etiketi içine ekleyeceğiniz <a> etiketine ise .nav-link sınıfını vermemiz gerekiyor.

<nav>
  <ul class="nav">
    <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" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
</nav>

Boostrap 4 Yatay Menü Hizalama (Aligned Navs)

Bootstrap 4 navs‘ leri hizalamak için bootstrap flexbox sınıflarını kullanabiliriz.

** Ortaya almak için .justify-content-center sınıfını kullanmalıyız.

** Sağa hizalamak için .justify-content-end sınıfını kullanmalıyız.

 <ul class="nav justify-content-center">
   
   </ul>    
 
   <ul class="nav justify-content-end">
 
  </ul>

Boostrap 4 ile Dikey Menü Hazırlama (Vertical Navs)

Boostrap 4 navs ile dikey menü hazırlamak için .flex-column sınıfını kullanmalıyız.

<ul class="nav flex-column">  
  
  </ul>
<div class="container mt-3">  
  
   <ul class="nav flex-column">
    <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" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" href="#">Disabled</a>
    </li>
  </ul>
  
</div>

** navbar-expand-sm sınıfını sm cihaz çözünürlüğü ve üstündeki çözünürlüklerde linkler yan yana gelsin diye kullanıyoruz.
Aynı şekilde linklerin yan yana gelmesini daha büyük çözünürlüklerde aktif etmek istiyorsak sırasıyla md, lg, xl sınıflarını kullanabiliriz. Ancak linklerin sm ve üstünde yan yana olması en doğru görüntüyü veriyor. sm ‘nin altında yani xs çözünürlüğünde ise linkler alt alta gelir.

  <nav class="navbar bg-light navbar-expand-sm">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="#" class="nav-link">link1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link2</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link3</a>
        </li>
    </ul>
</nav>

Not: a etiketinin yazı rengini beyaz yapmak için navbar-dark kullanmak gerekiyor

 <nav class="navbar bg-danger navbar-dark navbar-expand-sm">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="#" class="nav-link">link1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link2</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link3</a>
        </li>
    </ul>
</nav>

Not: a etiketinin yazı rengini siyah yapmak için navbar-light kullanmak gerekiyor

navbar-brand ile logo-icon ekleleyebiliriz.

 <nav class="navbar bg-dark navbar-dark navbar-expand-sm">

    <a href="#" class="navbar-brand">
        <i class="fas fa-adjust"></i>
    </a>
    <ul class="navbar-nav ">
        <li class="nav-item">
            <a href="#" class="nav-link">link1</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link2</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">link3</a>
        </li>
    </ul>
</nav>

container classı ile içeriği sınırlandırabiliriz. İçerisindeki linkler oto olarak sağa hizalanır.

<nav class="navbar bg-dark navbar-dark navbar-expand-sm">
        <div class="container">
            <a href="#" class="navbar-brand">
                <i class="fas fa-adjust"></i>
            </a>
            <ul class="navbar-nav ">
                <li class="nav-item">
                    <a href="#" class="nav-link">link1</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">link2</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">link3</a>
                </li>
            </ul>
        </div>
    </nav>

Son olarak mobil görünüme geldiği zaman linkler kapansın alt alta gelsin ve tek button üzerinden kontrölü sağlansın.

 <nav class="navbar bg-primary navbar-dark navbar-expand-sm fixed-top">
    <a href="#" class="navbar-brand">Logo</a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"> </span>
    </button>
    <!--ilişkilndirmek için aşağıdaki ıd ve yukarıdaki data-target aynı değerleri vermemiz lazım.-->

    <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="#" class="nav-link">link1</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">link2</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link">link3</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container" style="height: 1000px;margin-top:100px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore doloremque excepturi rem consequatur porro eaque consequuntur, sunt at, optio placeat. Aperiam, modi, cupiditate. Et eveniet illo amet laudantium aperiam, aliquam.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore doloremque excepturi rem consequatur porro eaque consequuntur, sunt at, optio placeat. Aperiam, modi, cupiditate. Et eveniet illo amet laudantium aperiam, aliquam.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore doloremque excepturi rem consequatur porro eaque consequuntur, sunt at, optio placeat. Aperiam, modi, cupiditate. Et eveniet illo amet laudantium aperiam, aliquam.</p>
</div>

Yorum yazın

BENZER YAZILAR