html - 在 Bootstrap 中提供响应式布局的更清洁和高效的方式

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>

所以我所做的是在屏幕很小的时候把它变成一个图像 slider ，这非常有效

代码最终变得很长，带有多个 li 标记，并且只是重复代码，ul 类的名称除外。这意味着我最终得到了一些普通 div 的大代码，以及一些非常非常相似的大代码，唯一的区别是 ul class="imageslider"

将这种响应式想法放入代码中的更有效或更简洁的方法是什么？

更新:

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

    });

Answer 1

有多种方法可以实现您的建议。最干净的方法是尝试保留相同的类名，并根据屏幕尺寸为它们提供不同的行为。

您会注意到 bootstrap 使用“特殊”尺寸，例如 xs sm 或 md。

md > 991px

991px >= sm > 767px

767px >= 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 并将你的响应“行为”赋予 imageslider .

(只需将上面示例中的默认 imageslider 替换为默认的 ul-class-name，但我觉得这不是很干净。)