Question

对于网格模型的目的，我正在尝试编写一个智能脚本，它将读取包含引导类（如col-md-x等）的html标记。对于开发和设计期间的视觉辅助，我希望所有列都有背景添加颜色和一些空间以填充网格，以便他们可以看到网格堆叠等。

我的第一种方法如下：

标记系统

通过添加某些类，这些类被用作＆＃34;标签＆＃34;标记网格将提供什么类型的内容。例如：

    <div class="container">
       <div class="row">
         <div class="col-md-8 content"></div>
         <div class="col-md-4 sidebar"></div>
       </div>
    </div>

这些类将具有这些网格列占用的典型空间的设置背景颜色和高度。

虽然它有效，但我觉得这可能不是100％可扩展的，并且可能有更好的方法来实现自动化。

我想知道是否可以采用类似的方法，使用jQuery / Javascript将背景颜色设置为col-x-x类的所有div。这将设置背景颜色，以便网格在技术上可见，例如用途。然后让Javascript以某种方式自动为div设置固定的高度。这部分是我被困住的地方，我一直回到标记系统来标记它的类型。

Answer 1

使用jQuery，您可以轻松地执行此类操作 -

$('div[class*="col-md-"]').css('background-color', 'blue');

JSFiddle为您的例子。

您还可以设置任意数量的属性，例如 -

$('div[class*="col-md-"]').css({'background-color': 'blue', 'color': 'white'});

智能填充背景颜色的Bootstrap列

1 个答案: