bootstrap 基于 mysql 数据的徽章颜色

Question

我想问一下是否可以仅使用 PHP 根据 mysql 更改 bootstrap 徽章颜色？

如您所见，我有一个数据 'status = 1' 该列的数据类型是 TINYINT，有 3 个可用状态，所以我希望每个数字都会影响我在 html

下面是我的 html 状态 = 2

的样子

这个颜色是我想要的状态 = 1

是否可以让会员上传项目并选择状态类型时，它会自动选择正确的徽章颜色？

<div class="row">
  <?php
  while ($record = mysqli_fetch_assoc($hasil)) {
    ?>
  <div class="col-sm-6 col-lg-3 pb-3">
  <div class="card h-100">
    <img class="card-img-top img-fluid" src="img/bike.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title"><a href="#"><?php echo $record['title'];?></a></h5>
    <hr>
    <span class="badge badge-success">Item Found</span>
    <p class="card-text"><?php echo $record ['description']; ?></p>
    <p class="card-text"><small class="text-muted"> <?php echo $record ['date_posted']; ?></small></p>
    <a href="#" class="btn btn-primary"> More Info</a>
  </div>
  </div>
  </div>
  <?php }  ?>
</div>

Answer 1

使用if else检查项目的当前状态。分配该状态所需的任何 class。

if($record['status'] == 1)
{
    $stsCls = 'badge-success';
}
else if($record ['status'] == 2)
{
    $stsCls = 'badge-warning';
}
else
{
    $stsCls = 'badge-primary';
}

将 class 添加到项目状态标签。

<span class="badge <?=$stsCls;?>">Item Found</span>

Answer 2

使用 if 和 else 条件。

<div class="row">
  <?php
  while ($record = mysqli_fetch_assoc($hasil)) {
    ?>
  <div class="col-sm-6 col-lg-3 pb-3">
  <div class="card h-100">
    <img class="card-img-top img-fluid" src="img/bike.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title"><a href="#"><?php echo $record['title'];?></a></h5>
    <hr>
    <?php if($record['status'] == 2){ ?>
    <span class="badge badge-warning">Item lost</span>
    <?php }else if($record['status'] == 1){ ?>
      <span class="badge badge-success">Item Found</span>
    <?php } ?>
    <p class="card-text"><?php echo $record ['description']; ?></p>
    <p class="card-text"><small class="text-muted"> <?php echo $record ['date_posted']; ?></small></p>
    <a href="#" class="btn btn-primary"> More Info</a>
  </div>
  </div>
  </div>
  <?php }  ?>
</div>

Answer 3

试试这个：

<div class="row">
  <?php
  while ($record = mysqli_fetch_assoc($hasil)) {
    ?>
  <div class="col-sm-6 col-lg-3 pb-3">
  <div class="card h-100">
    <img class="card-img-top img-fluid" src="img/bike.jpg" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title"><a href="#"><?php echo $record['title'];?></a></h5>
    <hr>
    <?php if( $record ['status']==1) echo '<span class="badge badge-success" style="background-color:red">Item Found</span>' ; 
    elseif( $record ['status']==2) echo '<span class="badge badge-success" style="background-color:yellow">Item Found</span>' ; 
    else echo '<span class="badge badge-success" style="background-color:green">Item Found</span>' ; ?>
    <p class="card-text"><?php echo $record ['description']; ?></p>
    <p class="card-text"><small class="text-muted"> <?php echo $record ['date_posted']; ?></small></p>
    <a href="#" class="btn btn-primary"> More Info</a>
  </div>
  </div>
  </div>
  <?php }  ?>
</div>

Answer 4

您也可以使用开关来管理适当的文本

  ....
  <h5 class="card-title"><a href="#"><?php echo $record['title'];?></a></h5>
  <hr>
  <? php 
    switch ( $record ['status']){
      case 1:
        $badge ='badge badge-success';
        $msg = 'Item Found';
        break;
      case 2:
        $badge ='badge badge-warning';
        $msg = 'Item Lost';
        break;     

      case 3:
        $badge ='badge badge-info';
        $msg = 'Item some....';
        break;  

      default:
        $badge ='badge badge-primary';
        $msg = 'Item other';
        break;


    }

   echo  '<span class="<'. $badge . '"><badge badge-success">'. $msg. '</span>';

?>

<p class="card-text"><?php echo $record ['description']; ?></p>
....

bootstrap 基于 mysql 数据的徽章颜色

bootstrap badge color based data on mysql

php

html

mysql

bootstrap-4

badge