“Icon-bar” у навігаційній панелі twitter bootstrap

Я не можу зрозуміти, що означає наступний код з точки зору 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>

Для чого icon-bar? Чому є три подібні випадки цього?

Цей код знаходиться в розділі навігаційної панелі:

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

html css twitter-bootstrap

— JohanTG
джерело

Він полягає у створенні кнопки з трьома горизонтальними лініями. Ця кнопка відображається, коли ширина екрану невелика і панель навігації згортається. При натисканні на нього панель навігації розширюється.

— Arpit Agrawal

@ArpitAgrawal, ви маєте рацію, але подумайте про те, щоб дати відповідь замість коментаря!

— ПОВІДОМЛЕННЯ

Відповіді:

130

icon-barвикористовується для адаптивних макетів для створення кнопки, яка виглядає як ≡ на вузьких екранах браузера. Ви можете змінити розмір вікна браузера (зробивши його звуженим), щоб побачити, як панель навігації замінюється цією кнопкою.

Три spanтеги створюють три горизонтальні лінії, схожі на кнопку, широко відому як піктограма "бургер".

Погляньте icon-barв bootstrap.css:

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

Це блок-структура, тому вона вирівнюється рядком за рядком. Значення background-colorмає бути сірим80 . На насправді, ви можете змінити його width, height, background-colorі т.д. , як ви хочете.

— лварають
джерело

Я не був впевнений, що я зрозумів, що ви мали на увазі під мінімізованим, оскільки я не отримую іншу піктограму, якщо вікно згорнуто. Але якщо зменшити видиму частину вікна браузера, то меню навігації перетворюється на кнопку, яка має три горизонтальні лінії. Дякую, що прояснили для мене цю таємницю.

— Bletch

@Bletch, як ви, напевно, зрозуміли, він має на увазі "згорнутий", як у "зробити вікно маленьким", а не звичайний "згорнути до системного трея".

— ПОВІДОМЛЕННЯ

Ви знаєте, що дивно в цьому ... це те, що це так .navbar-toggle .icon-bar. Замість того, щоб залишити його як самостійний клас, вони зробили його підкласом перемикача навігаційної панелі. Для мене це не має сенсу. Я хочу мати можливість прикрасити власні кнопки та розкривні меню цим поза панеллю навігації. Ви можете просто скопіювати весь блок CSS і зробити його самостійним класом для цього, але це повторний код. Однак кращого рішення я не знаю.

— Chris Cirefice

Не вірю, що на цій сторінці не відображається піктограма гамбургер .

— Джеремі Андерсон,

@JeremyAnderson Це відбувається зараз, чи не так? : D

— Прия Ранджан Сінгх

Я розширив відповідь OP, оскільки це з’явилося під час іншого пошуку, і мені довелося зробити кілька модифікацій, щоб насправді запрацювати речі, якими, на мою думку, варто було тут поділитися. Помістивши це у власну відповідь, щоб воно отримало належне форматування коду.

Я використав це в кнопці перемикання спадного меню замість панелі навігації (та сама ідея). Ось код, який я використав:

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"використовується для отримання стилів.

data-toggle="collapse" атрибут використовується для управління шоу та приховування.

data-target = "#id"атрибут використовується для підключення кнопки з розбірної DIV

icon-barвикористовується o створення кнопки з трьома горизонтальними лініями. Ця кнопка відображається, коли ширина екрану невелика

— NAND
джерело