Question

目前这是我的尝试响应布局，所以我有一些图像。当屏幕非常小时我会改变它：

<div class="hidden-xs">
    <ul class="ul-class-name">
        <li><img src="" /></li>
    </ul>
</div>

对此：

<div class="visible-xs">
    <ul class="imageslider">
        <li><img src="" /></li>
    </ul>
</div>

所以我所做的就是当屏幕非常小而非常有效时将其变成图像滑块

代码最终会包含多个li标记，并且只是重复的代码，但ul类的名称除外。这意味着我最终得到了一些普通div的大代码，还有一些非常相似的大代码，唯一不同的是ul class="imageslider"

将这种响应性想法纳入代码的更有效或更清晰的方法是什么？

更新：

$(document).ready(function(){   
    $('.imageslider').bxSlider({

    });

Answer 1

有多种方法可以做你提出的建议。最干净的方法是尝试保持相同的类名，并根据屏幕大小给它们一个不同的行为。

你会注意到引导使用＆＃34;特殊＆＃34;尺寸，例如 xs sm 或 md 。

md＆gt; 991px

991px＆gt; = sm＆gt; 767px

767px＆gt; = xs

现在，您可以围绕这些预定义的尺寸创建您的网站。您需要做的就是拥有默认行为，然后当检测到特定大小时，您就会改变它的行为。例如：

默认：

.imageslider { max-width: 700px; }

移动设备尺寸

@media (max-width: 767px){ .imageslider { max-width: 300px; background-color: blue; } }

或者您实际上可以使用这两个类名：

<ul class="ul-class-name imageslider">

并且您可以特别说出来，我希望imageslider仅针对移动设备激活：因此您将默认行为提供给 ul-class-name 以及您的响应＆＃34;行为＆＃34;到 imageslider 。

（在上面的例子中，只是将默认的imageslider替换为默认的ul-class-name，但是我觉得这不是很干净。）

在Bootstrap中提供响应式布局的清洁且高效的方法

1 个答案: