Question

我正在寻找一种更好的方法来有效地干掉使用Bootstrap 3.0的Rails视图

以下是视图的HAML代码：

%h1 Profiles

.visible-xs
  %table.table.table-striped
    %tbody
      - @profiles.each do |profile|
        %tr
          %td
            = profile.name
          %td{style: "text-align: right"}
            =link_to "<i class='fa fa-eye fa-small'></i>".html_safe, setup_profile_path(profile), class: "btn"
            =link_to "<i class='fa fa-edit fa-small'></i>".html_safe, edit_setup_profile_path(profile), class: "btn"

.hidden-xs
  %table.table
    %tr
      %th Name
      %th Last Updated
      %th Actions
    - @profiles.each do |profile|
      %tr
        %td= profile.name
        %td= time_ago_in_words profile.updated_at
        %td
          =link_to "<i class='fa fa-eye fa-small'></i> Details".html_safe, setup_profile_path(profile), class: "btn btn-sm"
          =link_to "<i class='fa fa-edit fa-small'></i> Change".html_safe, edit_setup_profile_path(profile), class: "btn btn-sm"
          =link_to "<i class='fa fa-trash-o fa-small'></i> Remove".html_safe, setup_profile_path(profile, method: :destroy), class: "btn btn-sm"

正如您所看到的，我有一个额外的列（目前），并且可以在应用程序开发时为更大的视口添加两到三个（因此表格布局），但对于移动设备，我只显示配置文件名称和按钮来获取更多细节（这在小屏幕上非常实用）。

我尝试使用网格系统的行和列，但它的很多工作，以在每个视口大小获得一个可用的界面，模板代码看起来像一个大的泥球一。到目前为止，分离到XS和“其他所有”是最干净的实现，但是两个块和两个循环虽然存在相同的数据。在我开始创建20多个这些之前，是否有一种干燥的方式来实现移动（xs）与平板电脑/桌面（sm，md，lg，...）视口，这些视口仍然非常清晰地看一眼并理解？

如何干掉Bootstrap视图

0 个答案: