[英]Toggle sidebar in bootstrap3?
我试图获得一个可切换的侧边栏:
没有侧边栏:
>> | Main text
| goes here
带有侧边栏:
H1 << | Main text
H2 | goes here
(以下是行为示例: http : //pythonhosted.org/cloud_sptheme -参见侧栏上的按钮。使用其代码库并不容易,因为它不是基于引导程序的)
我从一个使用Bootstrap 2和jQuery 1.8的工作示例开始: jsfiddle , 这样的问题 ,并试图使其在Bootstrap 3上运行。这是一个代码( bootply上的代码):
javascript:
$.asm = {};
$.asm.panels = 1;
function sidebar(panels) {
$.asm.panels = panels;
if (panels === 1) {
$('#content').removeClass('col-md-9');
$('#content').addClass('col-md-12');
$('#sidebar1').removeClass('show');
$('#sidebar1').addClass('hide');
} else if (panels === 2) {
$('#content').removeClass('col-md-12');
$('#content').addClass('col-md-9');
$('#sidebar1').removeClass('hide');
$('#sidebar1').addClass('show');
}
}
$('#toggleSidebar').click(function() {
if ($.asm.panels === 1) {
$('#toggleSidebar').addClass('fa-backward');
$('#toggleSidebar').removeClass('fa-forward');
return sidebar(2);
} else {
$('#toggleSidebar').removeClass('fa-backward');
$('#toggleSidebar').addClass('fa-forward');
return sidebar(1);
}
})
CSS:
#toggleSidebar {
position:fixed;
display:block;
left:0;
top:45px;
color:#779DD7;
padding:2px 4px;
}
hide {
display: none;
}
show {
display: inherit;
}
的HTML:
<div class="container">
<div class="row">
<div class="col-md-3 hide" id="sidebar1">
<div id="sidebar" class="bs-sidebar nav bs-sidenav pre-scrollable" role="complementary">
Toc goes here.
</div>
</div>
<div class="col-md-12" id="content">
Main text goes here.
</div>
</div>
<a id="toggleSidebar" href="#toggleSidebar1" class="fa fa-forward"</a>
</div>
编辑 :
离画布不是我所需要的:它不节省横向空间,它将div向右移动,并且div脱离屏幕。 将col-md-9
更改为col-md-12
并返回-是我想到的最好的方法。 这应该是简单的javascript,我不太擅长。
我认为您正在寻找“画布”侧边栏。 这是两个从左侧滑入画布的Bootstrap示例。
http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar http://www.bootstrapzero.com/bootstrap-template/facebook
这两个示例都使用媒体查询来检测浏览器并相应地放置侧栏。
看看http://getbootstrap.com/examples/offcanvas/ 。 这是一个由引导程序本身制作的画布示例。
我也喜欢这篇文章http://jasonweaver.name/lab/offcanvas/ 。
哦,我解决了:
js:
$(document).ready(function(){
$.asm = {};
$.asm.panels = 2;
$('#toggleSidebar').click(function(){
if ($.asm.panels === 1) {
$('#toggleSidebar span').attr({'class': 'glyphicon glyphicon-backward'});
$('#content').attr({'class': 'col-md-9'});
$('#sidebar1').show();
$.asm.panels = 2;
} else {
$('#toggleSidebar span').attr({'class': 'glyphicon glyphicon-forward'});
$('#content').attr({'class': 'col-md-12'});
$('#sidebar1').hide();
$.asm.panels = 1;
}
});
});
CSS:
#toggleSidebar {
position:fixed;
display:block;
left:0;
top:45px;
color:#779DD7;
padding:2px 4px;
}
的HTML:
<div class="container">
<div class="row">
<div class="col-md-3" id="sidebar1">
<div id="sidebar" class="bs-sidebar nav bs-sidenav pre-scrollable" role="complementary">
Toc goes here.
</div>
</div>
<div class="col-md-9" id="content">
Main text goes here.
</div>
</div>
<button type="button" id="toggleSidebar" class="btn btn-primary"><span class="glyphicon glyphicon-backward"></span></button>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.