Aşağıdaki kodun ne anlama geldiğini anlayamıyorum icon-bar:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Ne icon-bariçin? Neden bunun üç benzer örneği var?
Bu kod, gezinme çubuğu bölümündedir:
<div class="navbar-header">
...
</div>
Yanıtlar:
icon-bardar tarayıcı ekranlarında ≡ şeklinde görünen bir düğme oluşturmak için duyarlı düzenlerde kullanılır. Gezinti çubuğunun bu düğmeyle nasıl değiştirildiğini görmek için tarayıcı pencerenizi yeniden boyutlandırabilirsiniz (daraltarak).
Üç spanetiket, genellikle "burger" simgesi olarak bilinen, düğme gibi görünen üç yatay çizgi oluşturur.
Bir göz atın icon-bariçinde bootstrap.css:
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
Bir blok yapıdır, bu yüzden satır satır hizalanır. background-colorOlarak ayarlanır gray80 . Aslında onun değiştirebilir width, height, background-colorvb istediğiniz gibi.
.navbar-toggle .icon-bar. Onu bağımsız bir sınıf olarak bırakmak yerine, onu navbar geçişinin bir alt sınıfı yaptılar. Bu bana hiç mantıklı gelmiyor. Kendi düğmelerimi ve açılır menülerimi bununla bir gezinti çubuğunun dışında dekore edebilmek istiyorum. Bunu başarmak için tüm CSS bloğunu kopyalayabilir ve onu bağımsız bir sınıf yapabilirsiniz, ancak bu tekrarlanan koddur. Yine de daha iyi bir çözüm bilmiyorum.
Bu farklı bir arama sırasında ortaya çıktığı için OP'nin cevabını genişlettim ve burada paylaşmaya değer olduğunu düşündüğüm şeyleri gerçekten işe yarayabilmek için birkaç değişiklik yapmak zorunda kaldım. Uygun kod biçimlendirmesini alması için kendi cevabına koymak.
Bunu navbar yerine açılır bir geçiş düğmesinde kullandım (aynı fikir). İşte kullandığım kod:
HTML:
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Menu
<span class="icon-bars-button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="reservations">Reservations</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="amenities">Amenities</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="accommodations">Accommodations</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="location">Location</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="packages">Packages</a></li>
</ul>
</div>
CSS:
.dropdown-toggle .icon-bars-button{
display: inline-block;
vertical-align:middle;
}
.dropdown-toggle .icon-bar {
margin-bottom:2px;
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
class="navbar-toggle"stilleri elde etmek için kullanılır.
data-toggle="collapse" öznitelik gösterme ve gizlemeyi kontrol etmek için kullanılır.
data-target = "#id"nitelik katlanabilir div düğmeye bağlamak için kullanılır
icon-barüç yatay çizgiden oluşan bir düğme oluşturmak için kullanılır. Bu düğme, ekran genişliği küçük olduğunda görüntülenir