右侧的引导静态设置面板

Question

是否有人有任何示例或 boostrap conponent 来获取设置面板，如下所示：例

您可以在右侧看到设置按钮。

Answer 1

弄清楚您看到的网站中的组件如何工作的一个好方法是使用浏览器的开发人员工具。例如，在Chrome中，您可以右键单击设置按钮并检查它以查看其HTML和CSS。

所以我这样做了，我已经将重要的HTML和CSS复制到这个jsfiddle中。这很简单，UI很差，但我希望它能有所帮助。

在CSS部分，它所做的只是将节点定位为fixed，并在更改其right css规则时添加一个简单的过渡。

#config-tool {
    position: fixed;
    right: -200px;
    top: 120px;
    width: 200px;
    z-index: 1000;
    transition: all 0.2s ease-in-out 0s;
}

然后，您只需要一些js来捕获按钮上的单击并更改css类，以便将组件定位为显示其余内容：

configNode.addEventListener('click', function() {
    if (isOpen) {       
        configNode.className = '';
    } else {
        configNode.className = 'open';
    }
    isOpen = !isOpen;
});

查看 jsfiddle 了解更多细节。