使用jquery动态创建引导网格列

Question

我想生成一个带有列的引导网格: calss =“col lg-6”和"col-lg-3“。下面是html：

<div class="container">
<div class="row">
<div class="col-lg-3">
    <img src="../dist/images/test-info.png" alt="TEST-PLAN"/>
</div>
<div class="col-lg-6">
    <img src="../dist/images/test-details.png" alt="TEST-DETAILS"/>
</div>
<div class="col-lg-3">
    <img src="../dist/images/test-stats.png" alt="TEST-STATS"/>
</div></div></div>

然而，我想动态生成上面的网格，这样当测试时，它应该显示‘class ="col-lg-6" -STATS’图像和它在下面的json中提到的正确位置：

var data = [
    {
        "widgetId": "widget_0",
        "title": "Test Info",
        "description": "",
        "type": "info",
        "dataType": "TEST_INFO",
        "position": {
            "col": 1,
            "row": 1,
            "size_x": 1,
            "size_y": 4
        }
    },
    {
        "widgetId": "widget_1",
        "title": "Test Details",
        "description": "",
        "type": "info",
        "dataType": "TEST_DETAILS",
        "position": {
            "col": 2,
            "row": 1,
            "size_x": 2,
            "size_y": 4
        }
    },
    {

     "widgetId": "widget_2",
     "title": "Test Stats",
     "description": "",
     "type": "info",
    "dataType": "TEST_STATS",
    "position": {
            "col": 4,
            "row": 1,
            "size_x": 1,
            "size_y": 4
               }
}]

每个图像都有自己的渲染位置，因此使用如下条件语句：

if(class=="col-lg-6")
{//display image as 'TEST-DETAILS'}

如何创建一个动态模板，并编写一个javascript函数来为类循环，并根据位置显示图像？

谢谢！！

Answer 1

在互联网上有很多例子。

我使用的最好的方法之一是：http://www.cssgrid.co/

使用起来非常轻巧和强大。

编辑：从2017年开始，我开始使用CSS flex属性。在我看来，CSS网格框架在当时并没有真正的帮助。

Answer 2

您可以使用测试类选择器来选择类为jQuery -lg-6的元素，然后将属性alt设置为TEST-DETAILS ex。$(".col-lg-6").attr("alt"，“测试详细信息”)