README

Bootstrap 3 简单响应式侧边栏

需求

• jQuery 版本 1.7.0 及以上

安装

composer require gozoro/bootstrap-sidebar

用法

引用插件和 jQuery

<script src='/resources/js/jquery.js' type='text/javascript'></script>
<script src='/resources/js/bootstrap-sidebar.js' type='text/javascript'></script>
<link href="/resources/css/bootstrap-sidebar.css" rel="stylesheet">

左侧边栏布局示例

<style>
	.sidebar{width:300px;}
</style>
<div class="container-fluid">
	<div class="sidebar sidebar-lg sidebar-md">
		Static sidebar for large screen and medium screen.
		Slide panel for small screen and extra small screen.
	</div>
	<div class="content">...</div>
</div>

其他左侧边栏布局示例

<style>
	.sidebar.left{width:300px;}
</style>
<div class="container-fluid">
	<div class="sidebar left sidebar-lg">
		Static sidebar for large screen.
		Slide panel for medium screen and small screen and extra small screen.
	</div>
	<div class="content">...</div>
</div>

右侧边栏布局示例

<style>
	.sidebar.right{width:300px;}
</style>
<div class="container-fluid">
	<div class="sidebar right sidebar-lg">
		Static sidebar for large screen.
		Slide panel for medium screen and small screen and extra small screen.
	</div>
	<div class="content">...</div>
</div>

左侧和右侧边栏布局示例

<style>
	.sidebar.left{width:300px;}
	.sidebar.right{width:200px;}
</style>
<div class="container-fluid">
	<div class="sidebar left sidebar-lg sidebar-md sidebar-sm">
		Static sidebar for large screen and medium screen and small screen.
		Slide panel for extra small screen.
	</div>
	<div class="sidebar right sidebar-lg">
		Static sidebar for large screen.
		Slide panel for medium screen and small screen and extra small screen.
	</div>
	<div class="content">...</div>
</div>

固定左侧和右侧边栏布局示例

<style>
	.sidebar.left{width:300px;}
	.sidebar.right{width:200px;}
</style>
<div class="container-fluid">
	<div class="sidebar left fixed">...</div>
	<div class="sidebar right">...</div>
	<div class="content">...</div>
</div>

带有打开和关闭按钮的布局示例

<style>
	.sidebar.left{width:300px;}
	.sidebar.right{width:200px;}
</style>
<div class="container-fluid">
	<div class="sidebar left fixed">
		<button class="sidebar-close">close</button>
	</div>
	<div class="sidebar right fixed">
		<button class="sidebar-close">close</button>
	</div>
	<div class="content">
		<button class="sidebar-open left">open left sidebar</button>
		<button class="sidebar-open right">open right sidebar</button>
	</div>
</div>