Bootstrap ile Responsive Web Tasarımı Eğitimi

İrem Ocaklı tarafından hazırlanmıştır...

☛Navigation Bar

✎Navigation barlar renklendirilebilir 1 numaralı kodda bg-light arka plan rengidir bg-dark olarak değitirilip yazı rengi beyaz yapılabilir.Sınıfla birlikte standart bir gezinme çubuğu oluşturulur .navbar , ardından duyarlı bir çöken sınıf oluşturulur: .navbar-expand-xxl|xl|lg|md|sm (gezinme çubuğunu xxlarge, ekstra büyük, büyük, orta veya küçük ekranlarda dikey olarak istifler).

➊<nav class="navbar navbar-expand-lg bg-light">
➋<div class="container-fluid">
➌<a class="navbar-brand" href="#">Temel bir 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="#">Kurslar</a></li>
➓<li class="nav-item">
➊➊<a class="nav-link active" aria-current="page" href="#">Seminerler</a></li>
➊➋<li class="nav-item">
➊➌<a class="nav-link active" aria-current="page" href="#">Uzaktan Eğitim</a></li>
➊➍<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
➊➎<li> <a class="dropdown-item" href="#">Kurslar<>/a</li>
➊➏<li> <a class="dropdown-item" href="#">Seminerler</a></li>
➊➐<li ><hr class="dropdown-divider"></li>
➊➑<li ><hr class=""dropdown-item" href="#">İletişim</a></li>
➊➒</ul>
</li>
➋➊<li class="nav-item">
➋➋<a class="nav-link disabled">Yeni Dönem></a>
➋➌</li>
➋➍</ul>
➋➎<form class="d-flex" role="search">
➋➏<input class="form-control me-2" type="search" placeholder="Arama" aria-label="Search"></a>
➋➐<button class="btn btn-outline-success" type="submit">Ara</Button>
➋➑</ul>
</form> </div> </div> </nav>

☛Renkli gezinme çubuklarına örnekler:


✎Dikey gezinme çubuğu oluşturmak için .navbar-expand-* sınıfını kaldırın

⭐➊<nav class="navbar bg-light">
➋<div class="container-fluid">
➌<ul class="navbar-nav">
➍<li class="nav-item">
➎<a class="nav-link" href="#">Kurslar</a>
➏</li>
➐<li class="nav-item">
➑<a class="nav-link" href="#">Seminerler</a>
➒</li>
➓<li class="nav-item">
➊➊<a class="nav-link" href="#">Seminerler</a>
➊➋</li>
</ul> </div> </nav>

☛Dinamik Navigation Bar

✎Sekmeleri değiştirilebilir yapmak data-toggle="tab"için her bağlantıya özniteliği ekleyin. Ardından .tab-pane, her sekme için benzersiz bir kimliğe sahip bir sınıf ekleyin ve bunları

class ile bir öğenin içine sarın .tab-content. Sekmelerin üzerlerine tıkladığınızda açılıp kapanmasını istiyorsanız, .fadesınıfı şuraya ekleyin .tab-pane:

⭐➊<ul class="nav nav-tabs" role="tablist">
➋<li class="nav-item">
➌<ul class="navbar-nav">
➍<a class="nav-link active" data-bs-toggle="tab" href="#home">Giriş</a>
➎</li>
➏<li class="nav-item">
➐<a class="nav-link" data-bs-toggle="tab" href="#anasayfa">Ana Sayfa</a>
➑</li>
➒<li class="nav-item">
➓<a class="nav-link" data-bs-toggle="tab" href="#eğitimlerimiz">Eğiitmlerimiz</a>
➊➊</li>
➊➋</ul>
➊➌<div class="tab-content">
➊➍<div id="home" class="container tab-pane active">
➊➎<h3>HOME</h3>
➊➏<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
➊➐</div>
➊➑<div id="home" class="container tab-pane active">
➊➒<h3>MENU1</h3>
➋➊<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
➋➋</div>
➋➌<div id="home" class="container tab-pane active">
➋➍<h3>MENU2</h3>
➋➎<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
➋➏</div>
➋➐<</div>
➋➑<</div>
➋➒<</div>


HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Menu 1

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Menu 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

⇦
⇨