Twitter önyükleme gezinme çubuğundaki "simge çubuğu"


97

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>

19
Üç yatay çizgiden oluşan bir düğme oluşturmaktır. Bu düğme, ekran genişliği küçük olduğunda ve gezinme çubuğu daraldığında görüntülenir. Üzerine tıkladığınızda gezinme çubuğu genişler.
Arpit Agrawal

1
@ArpitAgrawal, haklısınız, ancak bunu bir yorum yerine bir yanıt yapmayı düşünün!
MEMark

Yanıtlar:


131

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.


Pencere küçültüldüğünde farklı bir simge görmüyorum diye küçültüldüğüm için ne demek istediğini anladığımdan emin değildim. Ancak, tarayıcı penceresinin görünür kısmını küçültürseniz, gezinme menüsü gerçekten de üç yatay çizgiye sahip bir düğmeye dönüşür. Bu gizemi benim için açıkladığın için teşekkürler.
Bletch

3
@Bletch, muhtemelen anladığınız gibi, "pencereyi küçültmek" gibi "küçültülmüş" anlamına geliyor, normal "sistem tepsisine küçült" demek değil.
MEMark

2
Sen ... Bu konuda garip öyle ne olduğunu biliyoruz .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.
Chris Cirefice

9
Bu sayfada hamburger simgesinin görünmediğine inanamıyorum .
Jeremy Anderson

1
@JeremyAnderson Şimdi oluyor, değil mi? : D
Priya Ranjan Singh

7

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;
}

3

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

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.