Toggle sidebar on mobile device with Twitter Bootstrap 2.x

问题

Is it possible by means of Bootstrap to hide the sidebar for mobile devices, but let it be accessible through toggle button? The toggle button should only show for the mobile device, where the default view is without sidebar - similar to how the responsive Bootstrap navbar works. See attached graphic.

回答1:

example which uses bootstrap's responsive class and two jquery onclick events: 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');

    }
);

来源：https://stackoverflow.com/questions/16871718/toggle-sidebar-on-mobile-device-with-twitter-bootstrap-2-x

标签

twitter-bootstrap

toggle