2013-01-23 5 views
2

부트 스트랩 호환 <div>, <span>, etc 태그를 사용하는 "게시자"작성자를 만들려고합니다. 사용자가 게시물을 텍스트 상자에 입력하는 동안 1/2 페이지 너비 크기로 옆에 "미리보기"를 만들려고했습니다. 그래서 그 안에있는 모든 것이 2로 축소 될 것입니다.부트 스트랩 크기 축소

제 질문 : 미리보기로 만들 수 있도록 부트 스트랩 요소를 축소 할 수있는 방법이 있습니까? jquery 등을 사용하여 페이지에 동적으로 입력하고 형식을 지정할 수 있지만, 실제로 모든 것을 축소하는 방법을 알아야합니다.

감사합니다.

+1

내용을 컨테이너 div에 row-fluid로 입력하면 div12 클래스를 span12로 사용할 수 있으며 컨테이너 폭의 100 %를 사용하므로 div의 너비가 어떻게 설정되었는지에 관계없이 내용도 마찬가지입니다. – sberry

+0

무엇을 시도 했습니까? 부트 스트랩에 대한 CSS 문서는 매우 간단합니다. – charlietfl

+1

아마도 가장 깨끗하고/가장 매직 한 방법은'transform : scale()'을 사용하는 것입니다. http://stackoverflow.com/a/6130498/398242 –

답변

2

대상 잠재 고객에 대해 가정하거나 최소 브라우저 가이드 라인을 설정할 수 있다고 가정 할 때 하나의 옵션은 CSS3 2D Transforms을 사용하는 것입니다. 당신이 당신의 미리보기 창 50 %를 당신의 규모를 원하는 경우에 따라서, 예를 들어, 당신은 같은 것을 할 수있는 그런 다음

#my-preview-div { 
transform: scale(.5); 
-ms-transform: scale(.5); /* IE 9 */ 
-webkit-transform: scale(.5); /* Safari and Chrome */ 
-o-transform: scale(.5); /* Opera */ 
-moz-transform: scale(.5); /* Firefox */  
} 

을, 당신은 예를 들어, 미리보기 DIV로 미리보기 HTML을 주입하기 위해 jQuery를 사용할 수 있습니다 <div id="my-preview-div"></div>.