“Icon-bar” trong thanh điều hướng bootstrap của twitter

Tôi không thể hiểu mã sau đây có nghĩa là gì về mặt 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>

Để làm gì icon-bar? Tại sao có ba trường hợp tương tự của nó?

Mã này nằm trong phần thanh điều hướng:

<div class="navbar-header">
  ...
</div>

html css twitter-bootstrap

— JohanTG
nguồn

Đó là tạo một nút có ba đường ngang. Nút này được hiển thị khi chiều rộng màn hình nhỏ và thanh điều hướng thu gọn. Khi bạn nhấp vào nó, thanh điều hướng sẽ mở rộng.

— Arpit Agrawal

@ArpitAgrawal, bạn nói đúng, nhưng hãy coi đây là câu trả lời thay vì nhận xét!

— MEMark

Câu trả lời:

130

icon-barđược sử dụng cho các bố cục đáp ứng để tạo một nút trông giống như ≡ trên màn hình trình duyệt hẹp. Bạn có thể thay đổi kích thước cửa sổ trình duyệt của mình (bằng cách thu hẹp) để xem cách thanh điều hướng được thay thế bằng nút đó.

Ba spanthẻ tạo ra ba đường ngang trông giống như một nút, thường được gọi là biểu tượng "bánh mì kẹp thịt".

Hãy xem icon-bartrong bootstrap.css:

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

Nó là một cấu trúc khối, vì vậy nó được căn chỉnh từng dòng một. Các background-colorđược thiết lập để được gray80 . Trên thực tế, bạn có thể thay đổi nó width, height, background-colorvv như bạn muốn.

— lvarayut
nguồn

Tôi không chắc rằng tôi hiểu ý bạn khi thu nhỏ vì tôi không nhận được biểu tượng khác nếu cửa sổ được thu nhỏ. Tuy nhiên, nếu bạn làm cho phần hiển thị của cửa sổ trình duyệt nhỏ hơn, thì thực sự menu điều hướng sẽ biến thành một nút có ba đường ngang. Cảm ơn vì đã giải tỏa bí ẩn đó cho tôi.

— Bletch

@Bletch, như bạn có thể đã hiểu, anh ấy có nghĩa là "thu nhỏ" như trong "làm cho cửa sổ nhỏ", không phải là "thu nhỏ vào khay hệ thống" thông thường.

— MEMark

Bạn biết điều kỳ lạ ở đây là gì ... đó là nó .navbar-toggle .icon-bar. Thay vì để nó như một lớp độc lập, họ đã biến nó thành một lớp con của thanh điều hướng chuyển đổi. Điều đó, đối với tôi, không có ý nghĩa gì. Tôi muốn có thể trang trí các nút và menu thả xuống của riêng mình với cái này bên ngoài thanh điều hướng. Bạn chỉ có thể sao chép toàn bộ khối CSS và đặt nó thành một lớp độc lập để thực hiện điều này, nhưng đó là mã lặp lại. Tuy nhiên, tôi không biết một giải pháp tốt hơn.

— Chris Cirefice

Tôi không thể tin rằng các từ biểu tượng bánh hamburger không xuất hiện trên trang này.

— Jeremy Anderson

@JeremyAnderson Nó hiện có, phải không? : D

— Priya Ranjan Singh

Tôi đã mở rộng câu trả lời của OP vì điều này xuất hiện trong một cuộc tìm kiếm khác và tôi đã phải thực hiện một số sửa đổi để thực sự có được những thứ hoạt động mà tôi cảm thấy đáng để chia sẻ ở đây. Đưa nó vào câu trả lời của riêng nó để nó có định dạng mã thích hợp.

Tôi đã sử dụng điều này trong một nút chuyển đổi thả xuống thay vì thanh điều hướng (cùng một ý tưởng). Đây là mã tôi đã sử dụng:

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

— khoa học đường phố
nguồn

những class="navbar-toggle"được sử dụng để có được phong cách.

data-toggle="collapse" thuộc tính được sử dụng để điều khiển hiển thị và ẩn.

các data-target = "#id"thuộc tính được sử dụng để kết nối các nút có div collapsible

icon-barđược sử dụng o tạo một nút có ba đường ngang. Nút này được hiển thị khi chiều rộng màn hình nhỏ

— NAND
nguồn