스타일 트위터 부트 스트랩 내비게이션

Question

사람들은 일반적으로 Twitter 부트 스트랩 접을 수있는 탐색의 출력을 어떻게 스타일링합니까?

표준 구조는 다음과 같습니다. 내가 .nav li a 스타일을 좋아하면

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
    <div class="container"> 
     <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar" type="button"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="brand">Project name</a> 
     <div class="nav-collapse collapse"> 
     <ul class="nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
    </div> 
</div> 

예를 들어, 나는 CSS 셀렉터와 그렇게 할 수 있지만, 그 또한 다음 모바일 내비게이션의 스타일을 변경합니다. 부트 스트랩은 다른 것들을 나타 내기 위해 클래스의 유용한 조합을 추가하는 것처럼 보이지 않습니다.

<div class="nav-collapse collapse"> <!-- Closed by button --> 
<div class="nav-collapse on collapse"> <!-- Open by button --> 
<div class="nav-collapse on collapse"> <!-- Closed by resizing window to > mobile --> 

나는 나 자신이 내가 나를 그냥 메인 탐색보다는 드롭 다운 스타일을 할 수 있도록 클래스의 조합을 찾을 수 없습니다 때문에 효과적으로 모바일 버전을 다시 부트 스트랩 스타일을 구현하는 것을 찾을 수 있습니다. 예를 들어, 드롭 다운은 다음과 같이 스타일을 지정할 수 있습니다. .nav-collapse.on

이것은 실제로는 매우 간단한 일이지만 해결하지 못한 것 같습니다.

Answer 1

나는이 문제와 직접적으로 관련이 있으며 해결책의 범위가 있습니다. 내가 부트 스트랩 구축을 포함하는 워크 플로우로 전환 한 -

참여

1. 하지만 가치 : 위해
   나는 그들에게 뭔가를 넣어 것입니다. 나는 bootsrap-sass를 나침반과 grunt 등으로 사용하고 있습니다. 이것은 축소, 연결 등의 작업을 처리하며,이 경우 _variables.scss 또는 .less 등의 모든 변경 사항을 처리합니다.
2. 저렴하지만 효과적입니다. - 나는 아주 간단한 해킹을 사용하여 두 번째 메뉴를 만들고 .hidden-phone, .visible-desktop 등을 추가했습니다. 이렇게하면 고유 한 터치 버튼을 만들거나 어쩌면 붕괴 할 수 있습니다. 그들이 here을 좀처럼 (그것은 부트 스트랩 아니에요하지만 동일한 개념)
3. 미디어 쿼리는 - 목록에서 내 마지막 CSS를 항상 내 responsive.scss 또는 미디어 쿼리의 전체 파일,이 방법은 내가 변경할 수 있습니다 어느 장치에서든 이전에 수행 한 작업을 무효로하고 싶습니다.

Answer 2

가장 간단한 해결책은 div의 기본 nav에 대한 .navbar div를 사용자 정의 클래스 (예 : "mainnav")로 감싸는 것입니다. 그런 다음 ".mainnav .nav li a"와 같은 스타일에 스타일을 쓸 수 있습니다.

부트 스트랩 구조 자체를 건드릴 수있는 경우 래퍼 div를 건너 뛰고 "navbar"div에 "mainnav"클래스를 추가 한 다음 ".mainnav.navbar .nav li a"와 같은 스타일을 쓸 수 있습니다.

Answer 3

메뉴는 구조와 스타일의 두 부분으로 나뉩니다. 스타일을 제거하면 스타일이 쉬운 나체 부트 스트랩 메뉴가 남습니다. "navbar-inner"호출을 제거하면 모든 스타일을 제거합니다. Navbar-innner에서 메뉴 div의 호출 이름을 navbar-inner_OFF로 바꿉니다. 그건 - 내부 CSS를 껐다 또한 메뉴 코드를 볼 때 나는 그것을 rarned 날 생각 나게.