부트 스트랩 3의 탐색 표시 줄은 어떤 구조입니까?

부트 스트랩 문서는 매우 유용하지만, documentation의 한 가지 예에서 navbar 구조를 이해할 수 없습니다. navbar의 하위 구성 요소와 그 구성 요소를 사용하는 방법을 이해하려고합니다. 내가 말할 수있는 한, 네비게이션 영역에는 헤더와 붕괴 영역이 있습니다. 헤더는 브랜드 이름 (왼쪽)과 토글 버튼을 오른쪽에 배치하는 장소 인 것처럼 보입니다. 그것은 또한 항상 보여지는 영역처럼 보입니다. 축소는 다른 모든 부분의 영역 인 것으로 보이며 작은 너비로 축소됩니다.부트 스트랩 3의 탐색 표시 줄은 어떤 구조입니까?

올바른 이해입니까? 다른 분야가 있습니까?
컨테이너 유체 래퍼의 목적은 무엇입니까? 이 래퍼가 제거되면 어떻게 될까요?
각 영역에는 어떤 종류의 요소가 포함될 수 있습니까?
접을 수있는 섹션이 필요 없다면 어떻게해야합니까? 머리글에 모든 것을 넣어야합니까?
접을 수없는 섹션이 세 개 (왼쪽, 가운데, 오른쪽) 필요하면 어떻게해야합니까?

도와주세요.

P. 부트 스트랩 문서는 매우 훌륭하지만 다양한 하위 구성 요소와 의도 된 동작 및 용도를 식별 할 수있는 다이어그램을 사용하여 구성 요소가 문서화되기를 바랍니다.

편집 나는 더 많은 예제를 가지고 부트 스트랩 Navbar의에 this tutorial 발견 - 정말 좋은 것입니다. 아마도 거기에서 패턴을 파생시킬 수는 있지만 누군가가 더 명확하게 표현할 수 있다면 좋을 것입니다. 예를 들어,이 튜토리얼의 첫 번째 예제는 클래스 navbar-header가있는 div와 클래스가없고 모든 링크가 포함 된 div가 있습니다. 이것은 나에게 navbar-header와 navbar-collapse가 필요에 따라 여러개의 div를 navbar에 추가 할 수 있다고 생각하게 만든다. 내가 거기에 컨테이너 유체 내부에 있기 때문에 것을 생각

<nav class="navbar navbar-inverse" role="navigation"> 

    <div class="container-fluid"> 

     <div class="row"> 
      <div class="col-xs-4 navbar-text"> 
       <a href="#" class="navbar-link">Left</a> 
      </div> 

      <div class="col-xs-4 navbar-text text-center"> 
       <a href="#" class="navbar-link">Middle</a> 
      </div> 

      <div class="col-xs-4 navbar-text text-right"> 
       <a href="#" class="navbar-link">Right</a> 
      </div> 
     </div> 

    </div><!-- /.container-fluid --> 
</nav>

: @ bto.rdz의 조언을 바탕으로

출처

2014-04-26 Naresh

모든 구성 요소들은 [드롭 다운]이며, 또한 문서에 (http://getbootstrap.com/components/#dropdowns), 폼 (http://getbootstrap.com/components/#navbar- 양식). 표시되는 첫 번째 버튼 태그는 화면이 작을 때 표시되는 태그입니다. –

나는 내 질문에 총알 # 3에 대답하고 있다고 가정합니다 - 감사합니다! 나는 아직도 다른 탄환에 대한 답변을 찾고있다. 아마도 "다른 유스 케이스에 맞게 Navbar 코드를 구성하는 방법"과 같은 질문에 대한 질문을 다시 말해야합니다. – Naresh

나는 너의 질문에 답하도록 노력할 것이다. 1) 예, 2) 최근에 부트 스트랩 3.0의 마지막 패치에서 컨테이너 유체가 추가되었습니다. 존재하지 않았으므로 마지막 업데이트에서 문서화해야합니다. 3) 이미 응답했습니다. 4) http://stackoverflow.com/questions/18292521/best- 3-navbar-without-responsive-collapse, 5) collapsable secection이 필요하지 않은 경우 pull-right, pull-left 및 col-md-offset-4와 같은 클래스를 사용할 수 있습니다 (check 수업을 상쇄하고 자신의 필요에 맞게 조정하십시오.) –

, 이것은 내가가 왼쪽, 가운데, 오른쪽 섹션에 대한 # 5 네비게이션 바와 함께 제공되는 솔루션이었다 네비게이션, 왜 왼쪽, 중간 및 오른쪽 링크에 3 개의 열이있는 행을 만들지 않습니까? 이것은 768 픽셀에서 깨는 것을 제외하고는 거의 효과가있었습니다. 나는이 중단 점에서 15px 왼쪽과 오른쪽 여백을 추가하는 Bootstrap을 추적했다. 다음과 같이이 동작을 무시하고 이제 모든 브라우저 너비에서 원하는 동작을 얻었습니다.

.navbar-text { 
    margin-left: 0; 
    margin-right: 0; 
}

출처

2014-05-01 03:05:51 Naresh

부트 스트랩 3의 탐색 표시 줄은 어떤 구조입니까?

답변

관련 문제