使用 javascript、jquery、bootstrap 在网页布局（手机/笔记本电脑）之间切换

Posted 2023-03-06

【中文标题】使用 javascript、jquery、bootstrap 在网页布局（手机/笔记本电脑）之间切换

【英文标题】：Toggle between webpage layout (phone/laptop) with javascript, jquery, bootstrap

【发布时间】：2019-06-07 01:24:47

【问题描述】：

我有一个带有引导类的某些 html 元素的网页。

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

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

任何帮助将不胜感激。

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

【问题讨论】：

您是否正在寻找类似的东西 - codepen.io/nagasai/pen/LMoQpr 带有用于添加和删除类的切换按钮？

没有。相反，toggle 应该调整屏幕大小，这应该会根据媒体查询自动触发不同的引导类 css。应该触发不同的媒体查询 css。效果应该与调整浏览器屏幕大小相同，无需用户调整大小。

大多数较新的浏览器都为此提供了模拟功能：请参阅developers.google.com/web/tools/chrome-devtools/device-mode 为什么要再次发明***？ ;)

所以基本上你只是想把你的网站内容包装到一个 div 容器中并改变宽度？

看这个：tomelliott.com/responsive-web-design/…

【参考方案1】：

如果您使用的是引导类，则布局应该已经根据浏览器/屏幕宽度进行更改，所以我不确定我是否完全理解，但如果您只是想要一个强制更改的按钮，您可以切换使用 javascript 类。

你会给你想要改变某种标识符的元素；您可以选择它的 id 或类。只给它一个类（例如，只给col-lg-4），然后选择它并切换类。这将在给定时间给它一个或另一个。制作一个按钮以从函数中触发它，您应该一切顺利。

<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');

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

希望这会有所帮助！如果我误解了您的问题，我深表歉意，也许您可​​以帮助澄清更多。

【参考方案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 将这些类添加到您的 iframe：

.xs 
  width: 375px;


.sm 
   width: 576px


.md 
   width: 768px


.lg  
   width: 992px


.xl 
   width: 1200px

最后为你的按钮编写点击处理程序来切换想要的类，例如切换移动预览的事件处理程序：

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

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

【参考方案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;

【讨论】：

我的答案很好的副本

【参考方案4】：

作为discussed here，媒体查询只能检测设备宽度，而不能检测元素的宽度。

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

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

---

查看JSFiddle 或下面的代码片段，看看这个 polyfill 如何根据您的实际 CSS 和元素的尺寸在 DOM 元素上添加新的元素属性和 ~= 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>