如何在数组变量中添加bootstrap卡,以便将来可以添加更多代码而无需编写更多代码?

时间:2018-05-24 09:52:22

标签: javascript bootstrap-4

我有一张存储网站数据的卡片(虽然不确定它是否是用数据实现图像的最佳方式)。像这样:

enter code here<div class="row">

    

    <div class="thumbnail">
        <img height="auto align-self-strech col-xs-3" class="card-img-top" src="http://1.bp.blogspot.com/-Ex9nL9iB34E/Tf8gTFiGqdI/AAAAAAAAE1A/lx8E4lYwVR0/s1600/Ahoban++by+Habib+Wahid+album+2011.jpg" alt="Card image cap">

         <div class="card-body">
    <h5 class="card-title">আহ্বান - হাবীব</h5>
    <p class="card-text">হাবীবের নতুন একক এলবাম</p>
    <a href="#" class="btn btn-primary">দেখুন</a>
  </div>

    </div>

</div>

    

    <div class="thumbnail">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSFgR41SZX2C-ovvvfCZ7mwqzPvyj6Q8CMhZ31yjaKLIoPUj-Ss7A">
         <div class="card-body">
    <h5 class="card-title">বেষ্ট অফ মিনার</h5>
    <p class="card-text">গান বাংলা থেকে প্রকাশিত মিনারের একক এলবাম</p>
    <a href="#" class="btn btn-primary">দেখুন</a>
  </div>

    </div>

</div>

如何在javascript中将它们插入数组中以与数据库进行交互?目前我正在使用Mongodb。 另外,我是否必须制作一张带有类图像,名称等的空卡,以便由数据库推送?

1 个答案:

答案 0 :(得分:0)

如果我理解正确,您想要用HTML创建一张卡片并用数据库中的数据填充它。这可以通过多种方式完成,包括手动。但我建议你使用一个框架。例如ReactJSVueJSAngular或类似内容。

您可以创建要填充的模板,并使用框架调用该模板并使用数据填充它。数据库无关紧要。