부트 스트랩 navbar가 2 개의 햄버거 메뉴로 축소되었습니다.

Question

저는 부트 스트랩 navbar를 많이보고 실험했으나 찾고있는 것을 얻을 수 없었습니다.

큰 화면에서 많은 콘텐츠로 멋진 navbar를 만들 수 있습니다. 중간 화면에서 해당 내용의 일부를 "일반 메뉴"로 축소하고 나머지는 실질적으로 변경하지 않길 바랍니다. 작은 화면에서 다른 햄버거 또는 검색 아이콘으로 나머지 부분을 축소하여 상단 표시 줄에 두 개의 접을 수있는 메뉴가 남았습니다. 이미지를 사용하여 모형을 만들려고했습니다.

Navbar on large display

Navbar on small display

심지어 더 작은 화면에 메뉴 화면 폭 약 70 %를 덮고, 대신에서 애니메이션, 오른쪽 각각 왼쪽에서 애니메이션 것인지 것 탑 100 % 너비.

Answer 1

데모 첨부 : 숨겨진 xs 또는 visible-lg 또는 visible-sm 클래스의 부트 스트랩을 사용하여 시도했는데, 작은 장치에서는 렌더링되지 않는 섹션이 많고 대형 장치에서는 렌더링되지 않는 것이 거의 없으므로 아이디어가 있습니다. 그에 따라 코드를 수정할 수있는 방법에 대해 알아보십시오.

섹션을 여러 개 추가하여 클래스를 hidden-xs 또는 visible-lg 또는 visible-sm으로 사용하는 장치에 따라 표시하고 부트 스트랩 공식 사이트에서 자세한 내용을 확인할 수도 있습니다.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="navbar navbar-default"> 
 
     <div class="container-fluid bg-info"> 
 
      <div class="navbar-header"> 
 
       <!--Visible on mobile device only--> 
 
       <a class="navbar-brand bg-info visible-xs pull-right" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" title="App Setting"> 
 
        <span class="glyphicon glyphicon-align-justify" style="cursor:default"></span> 
 
       </a> 
 

 
       <!--Visible on mobile device only--> 
 
       
 
        <a class="visible-xs btn navbar-brand pull-right" data-toggle="modal" href="#searchModal"> 
 
         <span class="glyphicon glyphicon-search"></span> 
 
        </a> 
 
       
 

 
       <a class="navbar-brand bg-success" style="padding-right:5px;padding-left:2px;"> 
 
        <span class="glyphicon glyphicon-home"></span> APP Name 
 
       </a> 
 

 
     
 
        
 
       
 

 

 
       
 

 
       <!--Hidden on mobile device only--> 
 
        <form action = "" method="get" role="search" class="hidden-xs navbar-form navbar-left"> 
 
         <div class="input-group"> 
 
          <input type = "search" class="form-control" name="id" placeholder="Search.."> 
 
          <span class="input-group-btn"> 
 
           <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button> 
 
          </span> 
 
         </div><!-- /input-group --> 
 
        </form> 
 

 
       
 
      </div> 
 

 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 

 
       <ul class="nav navbar-nav navbar-right"> 
 
        
 
         <li class="dropdown"> 
 
          <a href = "#" class="dropdown-toggle" data-toggle="dropdown"> 
 
           <span class="glyphicon glyphicon-user"></span> 
 
           Name<span class="caret"></span> 
 
          </a> 
 
          <ul class="dropdown-menu" role="menu"> 
 
           <li> 
 
            <a href = "" > 
 
             <span class="glyphicon glyAP glyphicon-log-out"></span> Sign out 
 
            </a> 
 
           </li> 
 
           <li> 
 
            <a href = "" ><span class="glyphicon glyphicon-wrench"></span> Change Password</a> 
 
            </li> 
 
          </ul> 
 
         </li> 
 
        
 
        <li class="dropdown"> 
 
         <a href = "#" class="dropdown-toggle" data-toggle="dropdown"> 
 
          <span class="glyphicon glyphicon-cog"></span> 
 
          <!--Visible on mobile device only--> 
 
          <span class="visible-xs-inline-block">Tools</span> 
 
         </a> 
 
         <ul class="dropdown-menu" role="menu"> 
 
          <li><a href = ""><span class="glyphicon glyphicon-stats"></span> kkk</a></li> 
 
          <li><a href = "" target="trace"><span class="glyphicon glyphicon-record"></span> dffd</a></li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 

 
    <!--Visible on mobile device only--> 
 
    <div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-hidden="true"> 
 
     <form action = "" method="get" role="search"> 
 
      <div class="iput-group input-group-lg" style="margin-top:20px;margin-left:10px;margin-right:10px;"> 
 
       <input type = "search" class="form-control" name="id" placeholder="Search....."> 
 
       <span class="input-group-btn"> 
 
        <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button> 
 
       </span> 
 
      </div><!-- /input-group --> 
 
     </form> 
 
    </div>