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>
Suscribirse a:
Comentarios de la entrada (Atom)

No hay comentarios.:
Publicar un comentario