如何使用 bootstrap 创建类似盾牌的徽章？

Question

你可能知道盾牌徽章（来自shields.io）。

它们是动态创建的 两种类型的 svg 图像:

1。超值徽章

<img src="https://img.shields.io/badge/value-5555ff">

2。键值徽章

<img src="https://img.shields.io/badge/key-value-5555ff">

它们很棒，但是，它们有 两个问题：

它们是额外的依赖项（如果 shields.io 关闭则没有徽章）
对于每个徽章，我们都有一个额外的 http 请求（加载时间长）

假设我已经在我的项目中使用 bootstrap（自托管以最小化依赖性）。如何使用 bootstrap 动态创建这两种类型的徽章？

（我也用PHP，所以badge($name, $value, $color)函数就很棒了）

Answer 1

Bootstrap 徽章 HTML

1。 Bootstrap 超值徽章

<span class="badge text-white p-0"><span class="py-1 px-2 rounded" style="background:#5555ff;">value</span></span>

2。 Bootstrap 键值徽章

<span class="badge text-white p-0 m-1"><span class="bg-secondary py-1 px-2 rounded-left">key</span><span class="py-1 px-2 rounded-right" style="background:#007bff;">value</span></span>

在这两种情况下，只需将 #5555ff 替换为徽章的颜色，将 value 和 key 替换为您的数据即可。

它们是这样的：

带有 PHP

的动态 Bootstrap 徽章

这个函数简单地 returns 上面的 HTML 并相应地插入颜色、键和值。

function badge($key, $value, $color="5555ff") {
  if ($key == "")
    return '<span class="badge text-white p-0"><span class="py-1 px-2 rounded" style="background:#' . $color . ';">' . $value . '</span></span>';

  return '<span class="badge text-white p-0"><span class="bg-secondary py-1 px-2 rounded-left">' . $key . '</span><span class="py-1 px-2 rounded-right" style="background:#' . $color . ';">' . $value . '</span></span>';
}

您可以通过以下方式调用 badge() 函数：

// value-badge with the default color (here: #5555ff)
echo badge("", "value");

// value-badge with a custom color (here: yellow)
echo badge("", "value", "ffff00");

// key-value-badge with the default color
echo badge("key", "value");

// key-value-badge with a custom color (here: green)
echo badge("key", "value", "00ff00");

资源

Bootstrap badges documentation
如果您对此感兴趣，我还创建了一个 gist on GitHub。

Answer 2

最基本的 OOP 方法如下所示：

<?php

class Badge
{

    // colors
    const COLOR_RED = '#f00';
    const COLOR_YELLOW = '#ff0';
    const COLOR_BLUE = '#55f';

    // badges
    const BADGE_PRIMARY = 'bg-primary';
    const BADGE_SECONDARY = 'bg-secondary';
    const BADGE_SUCCESS = 'bg-success';
    // etc

    // icons
    const ICON_FOO = 'icon-foo';
    const ICON_BAR = 'icon-bar';
    const ICON_BAZ = 'icon-baz';


    private $valueColour = Badge::COLOR_BLUE;
    private $badge = Badge::BADGE_SECONDARY;

    private $key = null;
    private $value = [];


    public function reset()
    {
        $this->valueColour = Badge::COLOR_BLUE;
        $this->badge = Badge::BADGE_SECONDARY;
        $this->key = null;
        $this->value = null;

        return $this;
    }

    public function setKey(string $key)
    {
        $this->key = $key;
        return $this;
    }


    public function addValue(string $value, $optionalIcon = null)
    {
        $icon = (!is_null($optionalIcon)) ? "<span class='some-icon-library {$optionalIcon}'></span> " : '';
        $this->value[] = $icon . $value;
        return $this;
    }


    public function setValueColour($colour)
    {
        $this->valueColour = $colour;
        return $this;
    }

    public function build()
    {
        if (is_null($this->value)) {
            echo 'Error: no value';
            return false;
        } else {
            if (!is_array($this->value)) {
                echo 'A value should be an array';
                return false;
            }
        }
        $value = implode(' | ', $this->value);
        if (is_null($this->key) || trim($this->key) == '') {
            echo "<span class='badge text-white p-0'><span class='py-1 px-2 rounded' style='background: {$this->valueColour};'> {$value}</span></span>";
        } else {
            echo "<span class='badge text-white p-0'>
                        <span class='{$this->badge} py-1 px-2 rounded-left'>{$this->key}</span>
                        <span class='py-1 px-2 rounded-right' style='background:{$this->valueColour};'>{$value}</span>
                      </span>";
        }
        return true;
    }
}

因此您可以通过以下方式在您的代码中使用它：

$badge = new Badge();


// default
$badge
    ->setKey('Basic Key')
    ->addValue('Basic value')
    ->build();

// incorrect
$badge
    ->reset()
    ->setValueColour(Badge::COLOR_RED)
    ->build();

// w/out key
$badge
    ->reset()
    ->addValue('Without key')
    ->setValueColour(Badge::COLOR_RED)
    ->build();

// some sample
$badge
    ->reset()
    ->setKey('Some Key')
    ->addValue('Some value')
    ->setValueColour(Badge::COLOR_RED)
    ->build();

// value(s) with some icons
$badge
    ->reset()
    ->setKey('Another key')
    ->addValue('Yet another value', Badge::ICON_FOO)
    ->addValue('Even more', Badge::ICON_BAR)
    ->addValue('Last but not least')
    ->setValueColour(Badge::COLOR_YELLOW)
    ->build();

注0：当然是POC，不是精确解，需要自己打磨;)

注意 1：由于最新的 Bootstrap 默认情况下不使用任何图标集，因此 icons 是虚拟的，因此您需要修复它才能与您选择的图标一起使用设置或仅通过自定义 CSS 样式设置。

注意 2：我们不使用任何 setter 作为值，因为我们想使用数组，因此使用 addValue() 来获取管道分隔值。

如何使用 bootstrap 创建类似盾牌的徽章？

How to create shields-like badges with bootstrap?

php

badge

twitter-bootstrap

shields.io