2012-12-19 4 views
1

Twitter Bootstrap을 사용하여 반응이 빠른 레이아웃을 구축하고 있으며 모든 크기/장치에서 레이아웃을 잘 유지하는 것이 어렵다는 것을 알고 있습니다.Twitter Bootstrap에서 안정적이고 반응이 빠른 레이아웃 만들기

초기 시도에서 배치를 위해 격자를 사용하려했지만 페이지 요소가 다른 크기로 원하는 곳에 위치하지 못했습니다. 이제 부트 스트랩의 스타일과 내 스타일을 재정의하기 위해 미디어 쿼리를 사용하고 있습니다. 이것은 길 아래 유지 보수 두통을 일으킬 수있는 것 같습니다.

스타일을 재정의하는 대신 화면 크기에 따라 스타일을 추가/제거해야한다고 생각합니다 (registering for media query events).

부트 스트랩을 사용하여 다른 화면 크기에서 페이지의 레이아웃을 조정하는 좋은 방법에 대한 조언을 제공 할 수 있습니까?

나는 일반적인 조언을 원하지만 도움이 될만한 코드와 스크린 샷을 게시 할 수 있습니다.

업데이트 : 미디어 쿼리 이벤트는 not well supported입니다.

+0

것은 정말이다 쿼리 데스크톱 뷰포트에서 적응성 및 응답 성이 떨어진다. –

+0

적응 형 대 반응 형의 의미를 설명해 주시겠습니까? – Todd

+1

적응 형 = 전체 레이아웃이 특정 너비로 ​​제자리에 고정되면 반응 형 = 레이아웃은 모든 중단 점에서 유연합니다. TBS에서 모바일 용으로 너비가 조정되면 반응 형이됩니다. 이는 적응 형입니다 : http://www.lpwebhosting.com/. 이것은 응답합니다 : http://www.microsoft.com/en-us/default.aspx –

답변

1

올바른 길을 찾으십시오. CSS 미디어 쿼리를 사용하십시오. 파이어 폭스는 특정 뷰포트로 페이지를 조정할 수있게 해주는 좋은 추가 기능을 가지고 있습니다. 그래도 크롬은 뭔가 비슷하게 보일 것입니다.

부울 트랩이 있기 때문에 특별한 트릭이 없습니다. 만큼 당신이 다음 반응 스타일 시트를 사용하도록 설정 한대로이 미디어를 시작하기에 좋은 장소입니다

갈 꽤 많이 좋은 내가 TBS에 대해 좋아하지 않는

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 
+0

응답 해 주셔서 감사합니다. 미디어 쿼리 이벤트를 기반으로 스타일을 추가/제거하는 데 따른 이점 또는 움직이는 부분을 너무 많이 추가하는 것입니다. – Todd

+1

IMHO에 아무런 문제가 없습니다. 예를 들어 400px에서 display : none을 사용하여 내 navbar를 제거하고 display : block ...으로 선택 태그 드롭 다운으로 바 꾸었습니다. 상황에 따라 다릅니다. – Richlewis

관련 문제