"Icon-bar" di bilah navigasi bootstrap twitter

96

Saya tidak mengerti apa arti kode berikut dalam hal 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>

Apa icon-baruntuk? Mengapa ada tiga contoh serupa?

Kode ini ada di bagian bilah navigasi: 

<div class="navbar-header">
  ...
</div>
html css twitter-bootstrap JohanTG
sumber
19
Ini untuk membuat tombol dengan tiga garis horizontal. Tombol ini ditampilkan saat lebar layar kecil dan bilah navigasi menciut. Saat Anda mengkliknya, bilah navigasi meluas.
Arpit Agrawal
1
@ArpitAgrawal, Anda benar, tetapi pertimbangkan untuk menjadikan ini jawaban alih-alih komentar!
MEMark

Jawaban:

130

icon-bardigunakan untuk tata letak responsif untuk membuat tombol yang terlihat seperti ≡ di layar browser yang sempit. Anda dapat mengubah ukuran jendela browser Anda (dengan membuatnya sempit) untuk melihat bagaimana bilah navigasi diganti dengan tombol itu.

Ketiga spantag tersebut membuat tiga garis horizontal yang terlihat seperti tombol, umumnya dikenal sebagai ikon "burger".

Lihat icon-bardi bootstrap.css:

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #cccccc;
  border-radius: 1px;
}

Ini adalah struktur blok, jadi itu sejajar baris demi baris. The background-colordiatur menjadi gray80 . Sebenarnya, Anda dapat mengubah nya width, height, background-color, dll seperti yang Anda inginkan.

lvarayut.dll
sumber
Saya tidak yakin apakah saya mengerti apa yang Anda maksud dengan meminimalkan sebagai ikon Saya tidak mendapatkan ikon yang berbeda jika jendela diminimalkan. Tapi, jika Anda membuat bagian jendela browser terlihat lebih kecil, maka memang menu navigasi berubah menjadi tombol yang memiliki tiga garis horizontal. Terima kasih telah membereskan misteri itu untukku.
Bletch
3
@Bletch, seperti yang mungkin sudah Anda duga, maksudnya "diminimalkan" seperti dalam "membuat jendela kecil", bukan "meminimalkan ke baki sistem" yang biasa.
MEMark
2
Anda tahu apa yang aneh tentang ini ... adalah itu .navbar-toggle .icon-bar. Alih-alih membiarkannya sebagai kelas mandiri, mereka menjadikannya subkelas dari tombol navigasi. Itu, bagi saya, tidak masuk akal. Saya ingin dapat menghias tombol dan drop-down saya sendiri dengan ini di luar bilah navigasi. Anda bisa menyalin seluruh blok CSS dan menjadikannya kelas mandiri untuk melakukannya, tetapi itu adalah kode yang berulang. Saya tidak tahu solusi yang lebih baik.
Chris Cirefice
9
Saya tidak percaya kata-kata ikon hamburger tidak muncul di halaman ini.
Jeremy Anderson
1
@JeremyAnderson Sekarang, bukan? : D
Priya Ranjan Singh
7

Saya memperluas jawaban OP karena ini muncul selama pencarian yang berbeda, dan saya harus membuat beberapa modifikasi untuk benar-benar membuat hal-hal berfungsi yang menurut saya layak dibagikan di sini. Menempatkannya dalam jawaban itu sendiri sehingga mendapat format kode yang tepat.

Saya menggunakan ini di tombol sakelar dropdown alih-alih navbar (ide yang sama). Ini kode yang saya gunakan:

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;
}
streetlogics
sumber
3

yang class="navbar-toggle"digunakan untuk mendapatkan gaya.

data-toggle="collapse" atribut digunakan untuk mengontrol pertunjukan dan sembunyi.

yang data-target = "#id"atribut digunakan untuk menghubungkan tombol dengan div dilipat

icon-bardigunakan untuk membuat tombol dengan tiga garis horizontal. Tombol ini ditampilkan jika lebar layar kecil

NAND
sumber