用背景色智能填充引导列

Intelligently Fill Bootstrap Columns with Background Color

本文关键字：填充 背景色 智能      更新时间：2023-09-26

为了网格模型的目的，我正在尝试编写一个智能脚本，它将读取我的html标记，其中包含诸如col-md-x等引导类。为了在开发和设计过程中提供视觉帮助，我希望所有列都有背景色，并添加一些空间来填充网格，这样他们就可以看到网格是如何堆叠的。

我的第一种方法是：

标签系统

通过添加某些类，这些类被用作"标记"，以标记网格将提供的内容类型。例如：

    <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设置固定的高度。这部分是我被卡住的地方，我不断回到标记系统来标记它的类型。

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

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

以JSFiddle为例。

你也可以在那里设置你想要的任何数量的属性，比如so-

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