Bootstrap navbar nasıl yapılır?

Bootstrap navbar tasarımı ile ilgili adımları öğrenerek, sayfanızın navigasyonunu daha da işlevsel hale getirebilirsiniz.

İçindekiler Göster

Bootstrap navbar nasıl yapılır?

Bootstrap, web sayfalarında modern ve kullanıcı dostu bir navigasyon çubuğu oluşturmanın en etkili yollarından biridir. Kullanıcı deneyimini artırmak için tasarlanan bu araç, hem masaüstü hem de mobil platformlarda mükemmel bir görünüm sunar. Bootstrap ile bir navbar oluşturmak, öncelikle gerekli kütüphanelerin entegrasyonu ile başlar. Ardından, HTML yapı taşları ile zenginleştirilen bir menü tasarımı yaparak, site ziyaretçilerine kolay bir gezinme imkanı sunabilirsiniz.

Bootstrap ile navigasyon çubuğu (navbar) oluşturmak için aşağıdaki adımlar izlenebilir:

  1. Bootstrap ve jQuery CDN'lerini dahil edin. Bunun için, CSS ve jQuery CDN'lerini yükleyen aşağıdaki kodlar <head> etiketine eklenmelidir :
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  2. <nav> etiketini ekleyin. <body> etiketinin içine,.navbar ve.navbar-default sınıflarıyla birlikte aşağıdaki gibi bir <nav> etiketi ekleyin :
    <nav class="navbar navbar-default">
    <!-- Navbar içeriği buraya eklenir -->
</nav>
  3. Başlığı ve navigasyon listesini ekleyin. <div> etiketine.container-fluid ve.navbar-header sınıflarını ekleyin ve başlık ile navigasyon listesini ekleyin :
    <div class="container-fluid">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
    </ul>
</div>

Ek özellikler eklemek için:

  • Açılır menüler:.dropdown sınıfı kullanılır.
  • Sabit navigasyon çubuğu:.navbar-fixed-top veya.navbar-fixed-bottom sınıfları kullanılır.
  • Metin ve form elemanları:.navbar-text ve.navbar-form sınıfları kullanılır

Diğer Teknoloji Yazıları

Bootrec /fixboot neden çalışmıyor?

Bootrec /fixboot komutunun işlevini yerine getirememesi, birkaç teknik sorunla ilişkilendirilebilir. Bu durum, özellikle sistemin başlatılmasında yaşanan zorluklar ve önyükleme dosyalarındaki bozulmalar sonucu ortaya çıkabilir. Kullanıcılar, bu tür hatalarla karşılaşarak sistemlerini çalışır hale getirmek için çeşitli...

Bootloader nedir ne işe yarar?

Bootloader, bir cihazın açılış sürecinde kritik bir rol üstlenen bir yazılım bileşenidir. Donanım bileşenlerini etkili bir şekilde başlatarak, işletim sisteminin sorunsuz bir şekilde yüklenmesini sağlar. Bu süreç, cihazın düzgün çalışabilmesi için oldukça önemlidir ve kullanıcıların...

Bor karbür ve silisyum karbür balistik seramik nedir?

Bor karbür ve silisyum karbür, modern mühendislikte önemli bir yer tutan, yüksek performanslı seramik malzemelerdir. Bu malzemeler, balistik koruma sistemlerinde ve zırhlı araçlarda kritik işlevler üstlenirken, aynı zamanda yüksek sıcaklıklara dayanıklılıklarıyla da dikkat çekerler. Gelişmiş...

Bor madeni hangi sektörleri etkiler?

Bor madeni, pek çok endüstriyel alanda önemli bir rol oynamaktadır. Bu doğal mineral, çeşitli sektörlerdeki ürünlerin kalitesini artırmakta ve yenilikçi çözümler sunmaktadır. Özellikle cam, seramik, tarım, enerji ve otomotiv gibi alanlarda borun kullanımı, hem verimliliği...
Teknoloji