表行数据的动态缩略图

Question

我想知道如何从表格的行中制作徽标的动态缩略图，如下图所示？

我使用下面的代码：

 .numberCircle { border-radius: 50%; width: 30px; height: 30px; padding: 8px; background: #ddd; border: 2px solid #666; color: white; text-align: center; font: 16px Arial, sans-serif; } 

 <?php $words = preg_split("/\\s+/", "Unnamed Template",2); foreach ($words as $w) { $acronym .= $w[0]; } ?> <div class="numberCircle"> <?php echo $acronym;?> </div> 

我正在使用PHP，HTML和Bootstrap进行Web开发。 是否有任何包/工具可以这样？

谢谢。

Answer 1

您可以尝试引导程序的媒体组件

<div class="media">
   <img src="..." class="mr-3" alt="...">
    <div class="media-body">
       <h5 class="mt-0">Media heading</h5>
       Cras sit amet nibh libero.
    </div>
</div>

这是一个演示： http ： //jsfiddle.net/n2javtos/

Answer 2

你可以使用JS和jQuery代替。 别忘了添加jQuery lib。

<div class="numberCircle"></div>
<p class="content">Lorem Ipsum Dormitor</p>

<script>
    var text = $('.content').text().split(" ");
    var cap = [];
    for (let i = 0; i < 2; i++) {
        var getCap = text[i].charAt(0);
        cap.push(getCap)
    }

    $('.numberCircle').text(cap[0] + cap[1])
</script>