Использование bootstrap 3, как у вас есть совершенно другой навигатор для мобильных устройств, а не отзывчивый?

Question

Я строю свой webapp, и мне не нравится, как выглядит мой навигатор, когда рушится. Я бы предпочел просто иметь другую навигационную панель для мобильных пользователей и, в основном, любой браузер, который падает ниже порога ширины.

Так как вместо того, чтобы загрузочный блок просто превращал вашу навигационную панель в список, я бы предпочел сделать ее красивой с помощью значков с кликом.

Каков наилучший способ сделать это? Вот мой текущий навигатор.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 

     <div class="navbar-header"> 


      <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> 
      <div {{action toggleProperty "showNotifications"}} id="not-container-mobile" class="navbar-toggle" style="position:relative"> 
      <i 
       class="icon-globe icon-large use-blue"></i>   

       {{#if showNotifications}} 
       {{view App.NotificationView}} 
       {{/if}} 
      </div> 
      <a class="navbar-brand " href="#"><img class="logo" 
      src="/images/app_dark.png"></a> 
     </div> 




<div class="navbar-header navbar-right"> 
     <div class="navbar-collapse collapse" > 

     <ul class="nav navbar-nav navbar-right"> 
     <li> 
      <div {{action toggleProperty "showNotifications"}} id="not-container" style="position:relative"> 
      <i 
       class="icon-globe icon-large use-blue"></i>   

       {{#if showNotifications}} 
       {{view App.NotificationView}} 
       {{/if}} 
      </div> 
     </li> 
     <li>{{view App.SearchView}}</li> 

     <li> 
     <div class="navbar-header navbar-right"> 
       <p class="navbar-text"> 
       {{#link-to "user" currentUser._id.$oid}} 
       {{currentUser.name}} 
       {{/link-to}} 

       </p> 
     </div> 
     </li> 
     <li> 
     <div id="settings-cog" class="navbar-header navbar-right"> 
      <li class="dropdown"> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">   
       <i class="icon-cogs icon-large use-blue"></i> 
       </a> 
       <ul class="dropdown-menu"> 
       <li><a data-toggle="modal" data-target="#changePassModal" href="#">Change Password</a></li> 
       <li><a {{action "toggleEditView" target="base"}} data-toggle="modal" data-target="#editModal" href="#" href="#">Edit Profile</a></li> 
       <li><a href="/#/logout">Logout</a></li> 
       </ul> 
      </li> 
     </div> 
     </li> 

     </ul> 

     </div> 
     </div> 



     </div> 


</nav> 

Answer 1

Просто создайте два навигатора. На полноразмерном навигаторе добавьте классы .hidden-sm и .hidden-xs. Затем на вашем мобильном навигаторе добавьте классы .visible-xs и .visible-sm. Таким образом, вы видите только навигационную панель для тех размеров, которые вы указали. Дополнительные параметры см. В разделе Responsive utilities.