使用 Twitter Bootstrap 2.x 在移动设备上切换侧边栏 [英] Toggle sidebar on mobile device with Twitter Bootstrap 2.x

查看：20
本文介绍了使用 Twitter Bootstrap 2.x 在移动设备上切换侧边栏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以通过 Bootstrap 隐藏移动设备的侧边栏，但可以通过切换按钮访问它?切换按钮应该只为移动设备显示，其中默认视图没有侧边栏 - 类似于响应式 Bootstrap 导航栏的工作方式.见附图.

解决方案

使用 bootstrap 的响应类和两个 jquery onclick 事件的示例:http://bootply.com/62828

html

<div class="row"><div class="span9" id="content" style="background-color:blue;"><div class="navbar visible-phone"><div class="容器"><a class="btn btn-navbar" id="showsidebar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>

<p>主列</p><p>内容...</p>

<div class="span3 hidden-phone" id="sidebar" style="background-color:darkgreen;"><div class="navbar visible-phone"><div class="容器"><a class="btn btn-navbar" id="showcontent"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>

侧边栏

javascript

$('#showsidebar').click(function(){$('#sidebar').removeClass('隐藏电话');$('#content').addClass('隐藏电话');});$('#showcontent').click(function(){$('#sidebar').addClass('隐藏电话');$('#content').removeClass('隐藏电话');});

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.

解决方案

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');

    }
);

这篇关于使用 Twitter Bootstrap 2.x 在移动设备上切换侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆