Twitter Bootstrap - создать превью

Question

У меня есть вопрос. Я использую Twitter Bootstrap для создания темы. Я хотел бы создать на моей странице что-то вроде предварительного просмотра с разным размером представлений, но без окна браузера с изменением размера.

Я хочу создать div с id «preview» и 4 кнопки (xs, sm, md и lg), чтобы изменить размер этого div, чтобы применить «mediaqueries» от TB.

Это можно сделать?

Answer 1

Вы можете изменить размер окна предварительного просмотра с JQuery:

HTML

<div id="preview"> <a href="#" id="lg">Large</a> 
<a href="#" id="md">Medium</a> 
<a href="#" id="sm">Small</a> 
<a href="#" id="xs">Extra small</a> 

</div> 

CSS

#preview { 
    width: 1200px; // initial width 
} 

JS

$("#lg").on("click", function() { 
    $("#preview").css("width", "1200px"); 
}); 
$("#md").on("click", function() { 
    $("#preview").css("width", "992px"); 
}); 
$("#sm").on("click", function() { 
    $("#preview").css("width", "768px"); 
}); 
$("#xs").on("click", function() { 
    $("#preview").css("width", "767px"); 
}); 

JSFiddle: http://jsfiddle.net/6kLo0cxa/