Bootsrap 정적 설정 패널이

Question

사람은 어떤 증거를 가지고 있는가 아니면 conponents 부트 스트랩이 같은 설정 패널을 얻을 : Example

당신은 오른쪽에있는 설정 버튼을 볼 수 있습니다.

Answer 1

사이트의 구성 요소가 어떻게 작동하는지 파악하는 좋은 방법은 브라우저의 개발자 도구를 사용하는 것입니다. 예를 들어 크롬에서는 설정 버튼을 마우스 오른쪽 버튼으로 클릭하여 HTML 및 CSS를 볼 수 있습니다.

그래서 나는 이것을 위해 중요한 HTML과 CSS를이 jsfiddle에 복사했습니다. UI가 좋지 않아서 간단하지만 도움이되기를 바랍니다.

CSS 부분에서 노드의 위치를 ​​fixed으로 지정하고 right CSS 규칙을 변경하면 간단한 전환을 추가하는 것입니다.

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

은을 가지고 : 구성 요소가 내용의 나머지 부분을 표시하는 방법으로 위치하도록

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

그런 다음 당신은 단지 버튼 클릭을 캡처하고 CSS 클래스를 변경하는 일부 JS 필요 자세한 내용은 jsfiddle을보십시오.