Question

是否有人有任何可能的引导组件示例来获取设置面板： Example

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

Answer 1

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

所以我这样做了，我已将重要的HTML和CSS复制到此jsfiddle中。它非常简单，用户界面很差，但我希望它可以提供帮助。

在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;
}

然后你只需要一些j来捕获按钮上的点击并更改css类，以便组件的位置能够显示其余的内容：

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

请查看jsfiddle了解详情。

右侧的Bootstrap静态设置面板

1 个答案: