侧边栏导航Sidebar

支持固定（默认）、相对、收缩三种主体定位模式，需要为触发元素添加data-toggle-sidebar属性，侧边栏导航内添加data-close-sidebar属性的元素会触发关闭，data-scrollbar="inverse"属性是为其绑定了滚动条组件，页面中仅能添加一个侧边栏导航

Click Button:
<button type="button" class="btn" data-toggle-sidebar>Toggle sidebar button</button>
Sidebar:
<div class="sidebar" data-scrollbar="inverse">
    <div class="media tc">
        <div class="img"><img src="imgurl" class="radius" style="width:35%"></div>
        <div class="content">
            <h6>Username</h6>
            <p>Good afternoon!</p>
        </div>
    </div>
    <div class="menu-accordion">
        <div><a href="#">Home</a></div>
        <div>
            <a>Clothing</a>
            <ul>
                <li><a href="#">T-Shirts</a></li>
                <li><a href="#">Long Sleeve Shirts</a></li>
            </ul>
        </div>
        <div>
            <a>Accessories</a>
            <ul>
                <li><a href="#">Watches</a></li>
                <li><a href="#">Hats</a></li>
            </ul>
        </div>
    </div>
    <i data-close-sidebar></i>
</div>

右侧Right

添加class="right"使其是右侧弹出的

<div class="sidebar right" data-scrollbar="inverse">
    ...
</div>

激活Active

添加class="active"使其默认是显示的

<div class="sidebar active" data-scrollbar="inverse">
    ...
</div>

相对Relative

添加data-body-position="relative"属性，使主体位置始终是相对的

<div class="sidebar" data-body-position="relative" data-scrollbar="inverse">
    ...
</div>

收缩Shrink

添加data-body-position="shrink"属性，使主体位置始终是收缩的，小屏幕时自动关闭收缩效果

<div class="sidebar" data-body-position="shrink" data-scrollbar="inverse">
    ...
</div>

回弹Rebound

添加data-body-rebound属性，点击主体区域会使侧边栏导航关闭

<div class="sidebar" data-body-position="shrink" data-body-rebound data-scrollbar="inverse">
    ...
</div>

自定义风格Custom Style

可以使用自定义风格工具快速创建CSS

<div class="sidebar active mystyle" data-scrollbar="inverse">
    ...
</div>