php - 表格行数据的动态缩略图

标签 php html css twitter-bootstrap bootstrap-4

我想知道如何从表格的行中制作 Logo 的动态缩略图,如下图所示?

enter image description here

我正在使用下面的代码:

.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 开发。有没有这样的包/工具?

谢谢。

最佳答案

您可以改用 JS 和 jQuery。不要忘记添加 jQuery 库。

<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>

关于php - 表格行数据的动态缩略图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55998975/

相关文章:

php - 如果列表中不存在键,则添加空行

php - 如果两个用户拥有相同数量的积分,则按 ID 排序

php - jQuery 加载自动刷新,按顺序传递变量

javascript - 自动更新 slider jquery内的div内容

html - Bootstrap - 将面板定位在页面中央并减小宽度

jquery - 每个 session 只有一次模态弹出

div 的 CSS 背景只会显示颜色,不会显示图像

html - 前缀 CSS 选择器

html - 使 html 列表 100% 高度带边框

html - 使用 span、text align 和 inline-block、CSS、HTML 将文本左对齐、中间对齐、右对齐