부트 스트랩과 파운데이션을 함께 사용 하시겠습니까?

Question

레이아웃과 CSS에 트위터 부트 스트랩을 사용하고 있습니다. 그러나 나는 부트 스트랩이 제공하는 것 이상의 기초 바 탐색을 좋아합니다. 나는 내 HTML (부트 스트랩으로 빌드 된) 내부의 최상위 바코드를 사용하려고했는데 레이아웃을 엉망으로 만든다. 두 가지 모두 "행"이라는 클래스에 광범위하게 의존하며 속성이 서로 다르기 때문에 놀랄 일이 아닙니다. 내가 떨어져 생각할 수있는 옵션

하나는 행 클래스를 무시하는 것입니다하지만 내 스타일 시트에 그 작품의 너무 많은 것 오른쪽 보이지 않는다 방법 몇 가지.

다른 옵션은 iframe을 사용하고있을 수 있습니다.

이 문제가 해결 될 수있는 다른 방법이 있습니까? 이것에 대한 iframe을 사용

는

Answer 1

나쁜 생각이다. Foundation Top Bar의 스타일이 마음에 들면 스타일 시트의 맞춤 클래스에 해당 스타일을 복사하십시오.

당신이 바로 그것을 얻을 수있는 메뉴 표시 줄에 대한 부트 스트랩의 기본 스타일의 일부를 오버라이드 (override) 할 수도 있습니다. 그건 당신이 사용하는 말은 유일한 구성 요소이기 때문에

Answer 2

이상적으로, 당신은 단지, 상단 바 CSS 및 기초 JS 코드를 사용해야합니다. ... 변수에 대한 의존성과 Here is the SCSS 파일 (_settings.scss에 선언 아니면 여전히 .row를 사용해야 할 경우 그냥 .row 스타일과 이름을 복사 generated CSS code

을 사용할 수 있습니다 그것은 다른 즉 :

/* The Grid ---------------------- */ 
.foundation-row { width: 1000px; max-width: 100%; min-width: 768px; margin: 0 auto; } 

마지막으로,하지 말자는 jquery.foundation.topbar.js 파일

$(document).foundationTopBar();

Answer 3

오래된 질문 상점하지만 호출을 포함하는 것을 잊지 누군가가 완벽한 솔루션을 찾고 있다면 최신 정보를 공유 할 것입니다. 웹 구성 요소

좀 더 복잡한 주제이지만 약간 재정의하지 않고 완전히 격리 된 그림자 DOM 내에서 위젯을 만들 수 있습니다. 그것에 대해 자세히 알아보기 here 및 here. 그런 다음 같은 것을 할 수 있습니다 :

<template id="templateContent"> 
    <style> @import "css/generalStyle.css"; </style> 
</template> 

this answer