使用 javascript、jquery、bootstrap 在网页布局 (phone/laptop) 之间切换

Question

我的网页包含某些 html 个元素 bootstrap 类。

<div class="col-xs-12 col-lg-4"></div>

我想在点击时提供一个按钮，应该切换 viewport/layout 网页上 div 的变化。单击该按钮后，我应该能够看到布局的实时变化和 bootstrap 触发 "col-xs-12" 用于移动视图和 "col-lg-4" 用于笔记本电脑视图。我不知道我在找哪个 css 或 bootstrap 或 html 属性。

任何帮助将不胜感激。

编辑 - 用例 - 我正在提供一个屏幕供用户编辑 CSS 和类。我想给用户一个切换按钮，这样他就可以看到他的元素在笔记本电脑视图和移动设备视图中的样子。

Answer 1

如果您使用 bootstrap classes 布局应该已经根据 browser/screen 宽度更改，所以我不确定我是否完全理解，但是如果您只是想要一个强制更改的按钮，您可以将 classes 切换为 javascript。

您将为要更改的元素提供某种标识符；一个 id 或 class，你可以 select 它。只给它一个 classes（例如只有 col-lg-4），然后 select 它并切换 classes。这将在给定时间给它一个或另一个。制作一个按钮以从函数中触发它，您应该可以开始了。

<button onclick='changeLayout()'>Change Layout</button>

function changeLayout() {
  var myDiv = document.getElementById('myDiv');
  myDiv.classList.toggle('col-lg-4');
  myDiv.classList.toggle('col-xs-12');
}

您需要对更改多个元素进行一些调整，但这是相同的概念。

希望对您有所帮助！如果我误解了你的问题，我很抱歉，也许你可以帮助澄清一些。

Answer 2

首先您创建一个 iframe 并将您网站的内容异步加载到 iframe。

<iframe id="media-simulator" class="embed-responsive-item"></iframe>

<script>
$(document).ready(function(){
    $('#media-simulator').load('/includes/main-page.html');
})
<script>

Bootstrap 中定义的媒体查询将对 iframe 的宽度敏感。因此，您可以在 CSS 代码中定义要模拟的宽度，然后稍后将带有 jQuery 的 classes 添加到您的 iframe:

.xs {
  width: 375px;
}

.sm {
   width: 576px
}

.md {
   width: 768px
}

.lg { 
   width: 992px
}

.xl {
   width: 1200px
}

最后为您的按钮编写点击处理程序以切换所需 class，例如切换移动预览的事件处理程序：

$('.button-xs').click(function() {
  $('#media-simulator').removeClass('sm');
  $('#media-simulator').removeClass('md');
  $('#media-simulator').removeClass('lg');
  $('#media-simulator').removeClass('xl');

  $('#media-simulator').addClass('xs');
})

Answer 3

我认为您需要一个模拟器来切换网站的视图。试试吧，我认为它应该适合你： fiddle

HTML:

<button type="button" id="toggle_btn">
   Toggle Viewport
</button>
<span id="span">Desktop View</span>
<hr />
<section class="iframe_holder">
  <iframe src="https://getbootstrap.com/" id="dup_viewPort"></iframe>
</section>

JS:

var isToggled = false;
$('#toggle_btn').click(function() {
  if (!isToggled) {
    $('#dup_viewPort').animate({
      width: '375px'
    }, function() {
      isToggled = true;
      $('#span').text('Mobile View');
    });
  } else {
    $('#dup_viewPort').animate({
      width: '100%'
    }, function() {
      isToggled = false;
      $('#span').text('Desktop View');
    });
  }
})

CSS:

#dup_viewPort {
  width: 100%;
  position: relative;
  height: 100%;
  border: 0;
}

Answer 4

由于 discussed here， 媒体查询 只能检测 设备宽度 而不是 元素的宽度.

你最好的选择是使用像 CSS Element Queries polyfill 这样的 JavaScript shim，它为所有新浏览器 (IE7+) 添加了对基于元素的媒体查询的支持。

如 polyfill 的官方 Docs 所述，CSS 元素查询 不仅允许您根据 window 定义媒体查询-size 但还根据元素（支持的任何选择器）大小添加 'media-queries' 功能，同时不会由于基于事件的实现而导致性能滞后。

根据您的实际 CSS 和元素的尺寸，在 DOM 元素上检查此 JSFiddle or the Code Snippet below to see how this polyfill adds new element attributes with the ~= attribute selector：

/* CSS */

.widget-name h2 {
    font-size: 12px;
}

.widget-name[min-width~="400px"] h2 {
    font-size: 18px;
}

.widget-name[min-width~="600px"] h2 {
    padding: 55px;
    text-align: center;
    font-size: 24px;
}

.widget-name[min-width~="700px"] h2 {
    font-size: 34px;
    color: red;
}

<!-- HTML -->

<script src="https://combinatronics.com/marcj/css-element-queries/master/src/ResizeSensor.js"></script>
<script src="https://combinatronics.com/marcj/css-element-queries/master/src/ElementQueries.js"></script>

<div class="widget-name">
  <h2>Element responsiveness FTW!</h2>
</div>

使用 javascript、jquery、bootstrap 在网页布局 (phone/laptop) 之间切换

Toggle between webpage layout (phone/laptop) with javascript, jquery, bootstrap

css

jquery

viewport

responsive-design

bootstrap-4