使用Twitter Bootstrap 2.x在移動設備上切換側邊欄

Question

是否可以通過Bootstrap隱藏移動設備的側欄，但是可以通過切換按鈕訪問它？切換按鈕應該只顯示給移動設備，默認視圖沒有側邊欄 - 類似於響應式Bootstrap導航欄的工作方式。見附圖。

Answer 1

例如它採用自舉的響應類和兩個jQuery的的onclick事件：http://bootply.com/62828

HTML

<div class="container"> 
<div class="row"> 
    <div class="span9" id="content" style="background-color:blue;"> 
<div class="navbar visible-phone"> 
<div class="container"> 
     <a class="btn btn-navbar" id="showsidebar"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
</div> 
</div>  
     <p>Main column</p> 
     <p>Content...</p> 
    </div> 
    <div class="span3 hidden-phone" id="sidebar" style="background-color:darkgreen;"> 

<div class="navbar visible-phone"> 
<div class="container"> 
     <a class="btn btn-navbar" id="showcontent"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </a> 
</div> 
</div>  
     Sidebar 
     </div> 
</div> 
</div> 

的JavaScript

$('#showsidebar').click(function(){ 
    $('#sidebar').removeClass('hidden-phone'); 
    $('#content').addClass('hidden-phone'); 

    } 
); 
$('#showcontent').click(function(){ 
    $('#sidebar').addClass('hidden-phone'); 
    $('#content').removeClass('hidden-phone'); 

    } 
);