jquery - 缩小引导程序

Question

我正在尝试创建一个使用 Bootstrap compatible<div>, <span>等标签的“帖子”创建者。当用户在文本框中输入他们的帖子时，我希望在它旁边创建一个“预览”，大小为 1/2 页面宽度。所以，里面的所有东西都会缩小2。

我的问题：有没有办法缩小 Bootstrap 元素，以便可以将其制作成预览？我可以使用jquery等来获取输入并将其动态格式化到页面上，但我只需要知道如何实际缩小所有内容。

谢谢！

Answer 1

假设您可以对目标受众做出假设或设置最低浏览器指南，则一种选择是使用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 */      
}

然后，您可以使用 jquery 将预览 html 注入到您的预览 div 中，例如 <div id="my-preview-div"></div>.