Bootstrap 4 grids y php


CÓDIGO 01:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<br><br>
<div class="container-fluid">
  <div class="row">
  <?php
$C[1]="text-muted";
$C[2]="text-primary";
$C[3]="text-success";
$C[4]="text-info";
$C[5]="text-warning";
$C[6]="text-danger";
$C[7]="text-secondary";
$C[8]="text-white";
$C[9]="text-dark";
$C[10]="text-body";
$C[11]="text-light";

$B[1]="bg-muted text-white";
$B[2]="bg-primary text-white";
$B[3]="bg-success text-white";
$B[4]="bg-info text-white";
$B[5]="bg-warning text-white";
$B[6]="bg-danger text-white";
$B[7]="bg-secondary text-white";
$B[8]="bg-white text-dark";
$B[9]="bg-dark text-white";
$B[10]="bg-body text-dark";
$B[11]="bg-light text-dark";

  for($a=1;$a<12;$a++)
  echo "<div class='col' ><p class=$B[$a]> $C[$a]</p></div>";
  ?>
  </div>
</div>

</body>
</html>


CÓDIGO 02:
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<br><br>
<div class="container-fluid">
 
  <?php
$C[1]="text-muted";
$C[2]="text-primary";
$C[3]="text-success";
$C[4]="text-info";
$C[5]="text-warning";
$C[6]="text-danger";
$C[7]="text-secondary";
$C[8]="text-white";
$C[9]="text-dark";
$C[10]="text-body";
$C[11]="text-light";

$B[1]="bg-muted text-white";
$B[2]="bg-primary text-white";
$B[3]="bg-success text-white";
$B[4]="bg-info text-white";
$B[5]="bg-warning text-white";
$B[6]="bg-danger text-white";
$B[7]="bg-secondary text-white";
$B[8]="bg-white text-dark";
$B[9]="bg-dark text-white";
$B[10]="bg-body text-dark";
$B[11]="bg-light text-dark";

$V[1]="Misón";
$V[2]="Visión";
$V[3]="Objetivos";
$V[4]="Cultura Laboral";
$V[5]="Historia";
$V[6]="Contacto";
$V[7]="Comentarios";
$V[8]="Revista digital";
$V[9]="Servicios";
$V[10]="Promociones";
$V[11]="Creditos";

  echo "<div class='row'>";
  for($a=1;$a<12;$a++)
   echo "<div class='col' ><p class=$B[$a]> $C[$a]</p></div>";
  echo "</div>";
 
  echo "<div class='row'>";
  for($a=1;$a<12;$a++)
   echo "<div class='col' ><p class=$B[$a]> $V[$a]</p></div>";
  echo "</div>";
  ?>
</div>

</body>
</html>
 

CÓDIGO 03:  

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<br><br>
<div class="container-fluid">
 
  <?php
$C[1]="text-muted";
$C[2]="text-primary";
$C[3]="text-success";
$C[4]="text-info";
$C[5]="text-warning";
$C[6]="text-danger";
$C[7]="text-secondary";
$C[8]="text-white";
$C[9]="text-dark";
$C[10]="text-body";
$C[11]="text-light";

$B[1]="bg-muted text-white";
$B[2]="bg-primary text-white";
$B[3]="bg-success text-white";
$B[4]="bg-info text-white";
$B[5]="bg-warning text-white";
$B[6]="bg-danger text-white";
$B[7]="bg-secondary text-white";
$B[8]="bg-white text-dark";
$B[9]="bg-dark text-white";
$B[10]="bg-body text-dark";
$B[11]="bg-light text-dark";

$V[1]="Misón";
$V[2]="Visión";
$V[3]="Objetivos";
$V[4]="Cultura Laboral";
$V[5]="Historia";
$V[6]="Contacto";
$V[7]="Comentarios";
$V[8]="Revista digital";
$V[9]="Servicios";
$V[10]="Promociones";
$V[11]="Creditos";

  echo "<div class='row'>";
  for($a=1;$a<12;$a++)
   echo "<div class='col' ><p class=$B[$a]> $C[$a]</p></div>";
  echo "</div>";
 
  echo "<div class='row'>";
  for($a=1;$a<12;$a++)
   echo "<div class='col' ><p class=$B[$a]> $V[$a]</p></div>";
  echo "</div>";
 
  echo "<div class='row'>";
  for($a=1;$a<12;$a++)
   echo "<div class='col' ><p class=$C[$a]> $V[$a]</p></div>";
  echo "</div>";
 
  ?>
</div>

</body>
</html>
 

No hay comentarios.:

Publicar un comentario