Go Dilinde Concurrency

2,068 More

Projedeki Git Dosyaları Nasıl Silinir?

1 7,475 More

yTheme

4 2,629 More

Sunucu Güvenliği | SSH (Secure Shell) Kullanımı

2 2,058 More

Truemag

  • PHP
  • Golang
  • Laravel
  • Linux
  • SQL
  • SEO
  • WordPress
  • Diğer
    • Yazılım
    • Javascript
    • Css/XHtml/W3C
    • Genel
    • Tanıtım
    • Ajax
  • Home
  • ANASAYFA
  • HAKKIMDA
  • SPONSORLUK
  • ARŞİV
  • İLETİŞİM
  • BENİMLE ÇALIŞMAK İSTER MİSİNİZ?

Bootstrap Navbar’ı CSS ile Şekillendirmek

bootstrap

Bilişim alanında yazı yazarken yazılara başlık atmak oldukça zor olabiliyor. Bu yazıya İngilizce bir başlık bulmak isteseydim “How to overwrite Bootstrap’s navbar CSS” gibi bir şeyler yazardım ve tam da amacına hizmet ederdi. Bunu Türkçe’ye çevirmenin (Bootstrap’in navbar CSS’inin ya da seçicisinin üzerine yazmak gibi bir şey.) pek hoş olmayacağını düşündüm. Konuyu gereksiz yere uzattığımın farkındayım ancak içimde kalmasın dedim :)

Bootstrap’i artık duymayan web developer bulmak mümkün değil sanırım. Bununla birlikte Bootstrap’in en önemli özelliklerinden birisinin de hazır CSS kodları ile bir çok öğenin önceden şekillendirildiğini biliyoruz, aynı Bootstrap navbar (navigasyon menüsü)’da olduğu gibi. Söz konusu navbar’a istediğiniz şekli vermek için Bootstrap’in kullanmış olduğu şablonu az çok bilmek gerekir. Burada tüm seçicilerden bahsetmem zor ancak en azından navbar’ı dilediğiniz gibi şekillendirebilmeniz için oluşturduğum şablonu paylaşabilirim.

Navbar’ın Önceki (Varsayılan) Şekli

Bootstrap Navbar Default CSS

Navbar’ın Güncellenmiş Şekli

Bootstrap Navbar Redesigned CSS

HTML Kodu

HTML dosyasında yukarıdaki navbar için aşağıdaki kodları kullandım.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<nav class="navbar navbar-default">
  <div class="container-fluid">          
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
 
    <div class="collapse navbar-collapse" id="menu-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">WORK</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  
  </div><!-- /.container-fluid -->
</nav><!-- /.navbar-default -->

CSS Kodu

Çalışmanız için oluşturacağınız CSS dosyasında aşağıdaki CSS kodlarını kullanarak gerekli düzenlemeyi yapabilirsiniz. Yukarıdaki mor navgisyon menüsünü aşağıdaki kod ile şekillendirdim.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* NAVBAR BEGIN ************************ */
.navbar-default {
  border-style:none;
  background-color: transparent;
  margin-top:50px;
}
.navbar-default .navbar-brand {
  width:130px;
  height:45px;
  background: url(../img/logo.png) no-repeat;
  text-indent: -999em;
}
.navbar-default .navbar-nav > li{
  background-color: #87509c;
  border-radius:8px;
  margin-left:10px;
}
.navbar-default .navbar-nav > li > a{
  color:#ffffff;
  border-radius:8px;
}
.navbar-default .navbar-nav > li > a:hover {
  background-color: #643a79;
  color:#ffffff;
}
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus {
  background-color: #643a79;
  color:#ffffff;
}
/* NAVBAR END ************************ */
Oca 16, 2017Erhan Yakut
Cloud Sunucu


hosting

Mint Linux'te LAMP Nasıl Kurulur?MySQL Veritabanı Export/Import Komutları
You Might Also Like
 
Tasarımlarda SEO’lu Logolar Kodlamak
 
Mobil Site Yapımı Üzerine Notlar
Erhan Yakut
4 years ago Css/XHtml/W3CBootstrap, CSS, navbar6,278
Sponsorlar

sponsor

sponsor

sponsor

sponsor
Bağlantılar
  • Beyazıt Kölemen
  • Domatessuyu
  • Lezzetli Robot Tarifleri
  • Ofizzo
  • PHP Dersleri
  • Wordpress Hosting
Random Posts
Pascal’ın Din Üzerine Olasılık Hesabı
Bootstrap’te Borderless (Sınırları Olmayan) Table Oluşturmak
Bir Başkadır İzmir Geceleri
Blesh | Müşterilerinize Mobil Cihazlarından Ulaşın
PHP / cPanel Otomatik Sub Domain Oluşturma
sdafasdf
Hakkımda

Bilişim Teknolojileri alanında içerik üretmek üzere oluşturulmuş olan Yakuter.com 2006 yılında Erhan Yakut tarafından hayata geçirilmiştir. devamını okuyun…

CLOUD SUNUCU DESTEĞİ
2006-2020 © Yakuter