右侧的 Bootstrap 静态设置面板

Question

是否有人有任何示例或引导程序组件来获取设置面板，如下所示： Example

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

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 class 以便组件以显示其余内容的方式定位：

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

查看 jsfiddle 了解更多详情。

右侧的 Bootstrap 静态设置面板

Bootsrap static settings panel on the right side

javascript

html

css

twitter-bootstrap

user-interface