105 lines
4.7 KiB
HTML
105 lines
4.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
|
|
|
|
<title>Colores en Bootstrap</title>
|
|
</head>
|
|
<body>
|
|
<h3>Botones de Colores!</h3>
|
|
<div>
|
|
<button type="button" class="btn btn-primary">Primary</button>
|
|
<button type="button" class="btn btn-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-success">Success</button>
|
|
<button type="button" class="btn btn-danger">Danger</button>
|
|
<button type="button" class="btn btn-warning">Warning</button>
|
|
<button type="button" class="btn btn-info">Info</button>
|
|
<button type="button" class="btn btn-light">Light</button>
|
|
<button type="button" class="btn btn-dark">Dark</button>
|
|
|
|
<button type="button" class="btn btn-link">Link</button>
|
|
</div>
|
|
<h3>Botones con bordes y animación!</h3>
|
|
<div>
|
|
<button type="button" class="btn btn-outline-primary">Primary</button>
|
|
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
|
<button type="button" class="btn btn-outline-success">Success</button>
|
|
<button type="button" class="btn btn-outline-danger">Danger</button>
|
|
<button type="button" class="btn btn-outline-warning">Warning</button>
|
|
<button type="button" class="btn btn-outline-info">Info</button>
|
|
<button type="button" class="btn btn-outline-light">Light</button>
|
|
<button type="button" class="btn btn-outline-dark">Dark</button>
|
|
</div>
|
|
<h3>De diferentes tamaños!</h3>
|
|
<div>
|
|
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
|
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
|
|
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
|
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
|
|
</div>
|
|
<h3>Formularios</h3>
|
|
<div>
|
|
<form>
|
|
<div class="form-row">
|
|
<div class="form-group col-md-6">
|
|
<label for="inputEmail4">Email</label>
|
|
<input type="email" class="form-control" id="inputEmail4">
|
|
</div>
|
|
<div class="form-group col-md-6">
|
|
<label for="inputPassword4">Password</label>
|
|
<input type="password" class="form-control" id="inputPassword4">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputAddress">Address</label>
|
|
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="inputAddress2">Address 2</label>
|
|
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
|
|
</div>
|
|
<div class="form-row">
|
|
<div class="form-group col-md-6">
|
|
<label for="inputCity">City</label>
|
|
<input type="text" class="form-control" id="inputCity">
|
|
</div>
|
|
<div class="form-group col-md-4">
|
|
<label for="inputState">State</label>
|
|
<select id="inputState" class="form-control">
|
|
<option selected>Choose...</option>
|
|
<option>...</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group col-md-2">
|
|
<label for="inputZip">Zip</label>
|
|
<input type="text" class="form-control" id="inputZip">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="gridCheck">
|
|
<label class="form-check-label" for="gridCheck">
|
|
Check me out
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Sign in</button>
|
|
</form>
|
|
</div>
|
|
<h3>... y más</h3>
|
|
<div>
|
|
El sitio tiene <a href="https://getbootstrap.com/docs/4.5/components/">documentación extensiva</a> de como utilizar la biblioteca, para darle a los sitios web un look moderno sin tener que escribir CSS adicional. Esta es una biblioteca que esta siendo desarrollada activamente, dispone de temas gratuitos disponibles asi como ejemplos de sitios para poder utilizar en desarrollos.</p>
|
|
</div>
|
|
<!-- Optional JavaScript -->
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|