Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Aporte Botones en Bootstrap
#1
Tal vez muchos ya lo sepan utilizar, pero por si no, aquí les dejo un pequeño aporte sobre los tipos de botones en bootstrap,
dejo los códigos y las imágenes de como es que deben de quedar.

Primero que nada deben de descargar o enlazar bootsptrap, para enlazarlo les dejo la etiqueta que deben de agregar en la cabecera de sus paginas

Esto va dentro de <head></head>

Código:
<!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

esto va justo antes de cerrar el </body>

Código:
<!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Ahora si.

Código:
<!-- Botón normal -->
<button type="button" class="btn btn-default">Normal</button>

<!-- Muestra el botón de forma destacada  -->
<button type="button" class="btn btn-primary">Destacado</button>

<!-- Indica una acción exitosa -->
<button type="button" class="btn btn-success">Éxito</button>

<!-- Mensajes con alertas informativas -->
<button type="button" class="btn btn-info">Información</button>

<!-- Indica que hay que tener cuidado con la acción asociada al botón -->
<button type="button" class="btn btn-warning">Advertencia</button>

<!-- Acción negativa o potencialmente peligrosa -->
<button type="button" class="btn btn-danger">Peligro</button>

<!-- Simple enlace, aunque conserva tu comportamiento original de botón -->
<button type="button" class="btn btn-link">Enlace</button>

[Imagen: 1.png]
Código:
<p>
 <button type="button" class="btn btn-primary btn-lg">Botón grande</button>
 <button type="button" class="btn btn-default btn-lg">Botón grande</button>
</p>
<p>
 <button type="button" class="btn btn-primary">Botón normal</button>
 <button type="button" class="btn btn-default">Botón normal</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-sm">Botón pequeño</button>
 <button type="button" class="btn btn-default btn-sm">Botón pequeño</button>
</p>
<p>
 <button type="button" class="btn btn-primary btn-xs">Botón extra pequeño</button>
 <button type="button" class="btn btn-default btn-xs">Botón extra pequeño</button>
</p>

[Imagen: 2.png]
Código:
<button type="button" class="btn btn-primary btn-lg btn-block">Botón de bloque</button>
<button type="button" class="btn btn-default btn-lg btn-block">Botón de bloque</button>

[Imagen: 3.png]

Código:
<button type="button" class="btn btn-primary btn-lg active">Botón principal</button>
<button type="button" class="btn btn-default btn-lg active">Botón</button>
Estos tienen un efecto como si estuvieran anctivados
[Imagen: 4.png]
Código:
<a href="#" class="btn btn-primary btn-lg active" role="button">Enlace principal</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Enlace</a>

[Imagen: 5.png]

Código:
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Botón principal</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Botón</button>

[Imagen: 6.png]
Código:
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Enlace principal</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Enlace</a>

[Imagen: 7.png]
Código:
<a class="btn btn-default" href="#" role="button">Enlace</a>
<button class="btn btn-default" type="submit">Botón</button>
<input class="btn btn-default" type="button" value="Campo input">
<input class="btn btn-default" type="submit" value="Enviar">

[Imagen: 8.png]

Eso seria todo, espero que les sirva para los que inician en bootstrap
[Imagen: nuevo_logo.jpg]
Desarrollo Digital
Alejandro Ramirez
Visita mi Blog 
https://alexramirez.ml
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Bootstrap Formulario Basico cmascreativo.ml 5 126 08-10-2018, 06:53 AM
Último mensaje: Boreas
  Bootstrap Barras de Progreso cmascreativo.ml 7 139 06-10-2018, 07:14 PM
Último mensaje: cmascreativo.ml
  Bootstrap Listas cmascreativo.ml 6 144 05-10-2018, 11:00 PM
Último mensaje: fercol
  LANZAMIENTO DE BOOTSTRAP 4.0.0 ALPHA Y ADIOS BOOTSTRAP 3 khristia 11 1,050 01-10-2016, 02:34 PM
Último mensaje: juanjj
  [Aporte] Curso completo Bootstrap habacuc78 10 1,007 06-02-2016, 04:50 AM
Último mensaje: habacuc78
  Cómo instalar Bootstrap habacuc78 3 470 22-12-2015, 10:33 PM
Último mensaje: Taquion
Ladrillo Como usar botones "disabled" y activarlos por JQuery Kevin9908 0 453 25-06-2015, 04:38 PM
Último mensaje: Kevin9908
  Botones Social Pure Css v2 By Spastox Spastox 2 570 25-04-2015, 06:48 AM
Último mensaje: garcon
  Bootstrap Navbar torgar22 4 1,227 10-04-2015, 02:27 PM
Último mensaje: TheBomberbe
  [PUBLICO] Tutorial Botones con perspectiva 3D AngelKrak 0 405 17-01-2015, 05:44 AM
Último mensaje: AngelKrak



Usuarios navegando en este tema: 1 invitado(s)