Question

也许我只是没有看到容易纠正的事情;但是，我发现当我使用bootstrap的响应式设计时，我倾向于有时重复代码。我正在谈论的一个例子如下所示。如何在不重复代码的情况下编写此示例并保持响应式设计？

    <div class="col-xs-12 col-sm-9 col-md-6">
        <div class="row">
            <div class="col-sm-3 text-left hidden-xs hidden-sm visible-md visible-lg">
                <%= image_tag(@club.logo_image) %>  
            </div>
            <div class="col-sm-3 text-left hidden-xs visible-sm hidden-md hidden-lg">
                <%= image_tag(@club.logo_image) %>  
            </div>
            <div class="col-sm-3 text-center visible-xs hidden-sm hidden-md hidden-lg">
                <%= image_tag(@club.logo_image) %>  
            </div>
            <div class="col-sm-9 text-left hidden-xs hidden-sm visible-md visible-lg">
                <h2><%= @club.name %></h2>
                <h4><%= @club.stadium_name %> - <%= @club.division_and_conference %></h4>
            </div>
            <div class="col-sm-9 text-left hidden-xs visible-sm hidden-md hidden-lg">
                <h2><%= @club.name %></h2>
                <h4><%= @club.stadium_name %> - <%= @club.division_and_conference %></h4>
            </div>
            <div class="col-sm-9 text-center visible-xs hidden-sm hidden-md hidden-lg">
                <h2><%= @club.name %></h2>
                <h4><%= @club.stadium_name %></h4>
                <h4><%= @club.division_and_conference %></h4>
            </div>
        </div>
    </div>

Answer 1

使用SCSS，您可以创建一个类并扩展其他类。

<div class="resp-col-sm-3">
    <%= image_tag(@club.logo_image) %>  
</div>

课程看起来像是：

.resp-col-sm-3 {
  @extend .col-sm-3;
  @extend .text-left; 
  @extend .hidden-xs;
  @extend .hidden-sm;
  @extend .visible-md;
  @extend .visible-lg;
}

Answer 2

另一种方法是将响应行为分解为不同的文件，并根据不同的媒体查询定义类属性。

<div class="col-sm-3 logo-image">
    <%= image_tag(@club.logo_image) %>  
</div>

然后基于http://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm

“text-left visible-lg”的div将变为

@media screen and (min-width: 922px) {
    .logo-image{
        ...css property values
    }
}

“text-center visible-xs”的div将变为

@media screen and (max-width: 768px) {
    .logo-image{
        ...css property values
    }
}

这只是我个人倾向于根据不同的媒体查询组织CSS样式而不是利用bootstrap框架。

如何在没有所有重复代码的情况下使用bootstrap的响应式设计？

2 个答案: