트위터 부트 스트랩 내비게이션 바의“아이콘 바”


96

다음 코드가 의미하는 바를 이해할 수 없습니다 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>

19
3 개의 수평선이있는 버튼을 만드는 것입니다. 이 버튼은 화면 너비가 작고 탐색 모음이 축소 될 때 표시됩니다. 그것을 클릭하면 탐색 모음이 확장됩니다.
Arpit Agrawal 2013 년

1
@ArpitAgrawal, 당신 말이 맞지만 댓글 대신 답을 만드는 것을 고려하십시오!
MEMark

답변:


130

icon-bar좁은 브라우저 화면에서 ≡처럼 보이는 버튼을 만드는 반응 형 레이아웃에 사용됩니다. 브라우저 창을 좁혀서 크기를 조정하여 navbar가 해당 버튼으로 어떻게 바뀌는 지 확인할 수 있습니다.

세 개의 span태그는 일반적으로 "버거"아이콘으로 알려진 버튼처럼 보이는 세 개의 수평선을 만듭니다.

한 번 봐 가지고 icon-bar의를 bootstrap.css:

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

블록 구조이므로 한 줄씩 정렬됩니다. 은 background-color로 설정되어 gray80 . 사실, 당신은 변경할 수 있습니다 width, height, background-color, 등 당신이 원하는대로.


창이 최소화되면 다른 아이콘이 표시되지 않기 때문에 최소화 된 것이 무엇을 의미하는지 이해하지 못했습니다. 그러나 브라우저 창의 보이는 부분을 더 작게 만들면 실제로 탐색 메뉴가 세 개의 가로줄이있는 버튼으로 바뀝니다. 저를 위해 그 수수께끼를 풀어 주셔서 감사합니다.
Bletch 2014 년

3
@Bletch는 아마 알다시피 "창을 작게 만들기"에서와 같이 "최소화"를 의미하며 일반적인 "시스템 트레이로 최소화"가 아닙니다.
MEMark

2
당신은 ... 이것에 대해 이상해가 있다는 무엇인지 .navbar-toggle .icon-bar. 독립형 클래스로 두는 대신 navbar 토글의 하위 클래스로 만들었습니다. 그것은 나에게 말이되지 않는다. 내비게이션 바 외부에서 내 버튼과 드롭 다운을 꾸밀 수 있기를 원합니다. 전체 CSS 블록을 복사하고이를 수행하기 위해 독립형 클래스로 만들 수 있지만 이는 반복되는 코드입니다. 그래도 더 나은 해결책을 모르겠습니다.
Chris Cirefice 2014-08-12

9
햄버거 아이콘 이이 페이지에 나오지 않는다는 말이 믿기지 않습니다.
Jeremy Anderson

1
@JeremyAnderson 지금은 그렇지 않습니까? : D
Priya Ranjan Singh

7

나는 이것이 다른 검색 중에 나온 이후 OP의 답변을 확장했으며 실제로 여기에서 공유 할 가치가 있다고 느꼈던 것을 실제로 작동시키기 위해 몇 가지 수정을해야했습니다. 적절한 코드 형식을 얻을 수 있도록 자체 답변을 넣으십시오.

navbar 대신 드롭 다운 토글 버튼에서 사용했습니다 (동일한 아이디어). 내가 사용한 코드는 다음과 같습니다.

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"스타일을 가져 오는 데 사용됩니다.

data-toggle="collapse" 속성은 표시 및 숨기기를 제어하는 ​​데 사용됩니다.

data-target = "#id"속성은 접을 사업부와 버튼을 연결하는 데 사용됩니다

icon-bar세 개의 수평선이있는 버튼을 만드는 데 사용됩니다. 이 버튼은 화면 너비가 작을 때 표시됩니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.