查看了例子中的源码,有个offcanvas.css和offcanvas.js需要加载。
offcanvas.css的源码:
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -50%;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -50%;
}
.row-offcanvas-right.active {
right: 50%;
}
.row-offcanvas-left.active {
left: 50%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%;
}
}
offcanvas.js的源码:
$(document).ready(function () {
$('[data-toggle="offcanvas"]').click(function () {
$('.row-offcanvas').toggleClass('active')
});
});
在 .html代码中加载这两个文件,样式和行为才能起效。
两个代码片段中对offcanvas的引用,button调用了data-toggle方法:
下面是list-group需要加载的样式



