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

Question 1

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

Question 2

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, 등 당신이 원하는대로.

Question 3

나는 이것이 다른 검색 중에 나온 이후 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;
}

Question 4

는 class="navbar-toggle"스타일을 가져 오는 데 사용됩니다.

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

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

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