Arranque 4 | Botones

Posted on by Rudeus Greyrat

Bootstrap proporciona diferentes clases que se pueden usar con diferentes etiquetas, como <button>, <a>, <input> y <label> para aplicar estilos de botones personalizados. Bootstrap también proporciona clases que se pueden usar para cambiar el estado y el tamaño de los botones. Además, proporciona clases para aplicar efectos de alternancia, casilla de verificación y botones de opción.
Bootstrap contiene muchas clases para establecer el estilo del elemento del botón. La lista de clases de botones se proporciona a continuación:

  • .btn
  • .btn-primario
  • .btn-secundario
  • .btn-éxito
  • .btn-info
  • .btn-advertencia
  • .btn-peligro
  • .btn-oscuro
  • .btn-luz
  • .btn-enlace

   

Ejemplo:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Buttons</h2>
        <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-warning">
            Warning</button>
        <button type="button" class="btn btn-danger">
            Danger</button>
    </div>
</body>
</html>               

Producción:

Nota: Los elementos <a>, <button> y <input> se utilizan para contener las clases de botón.

Ejemplo:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Button Elements</h2>
        <input class="btn btn-success" 
            type="button" value="Input Button">
        <input class="btn btn-success" 
            type="submit" value="Submit Button">
        <input class="btn btn-success" 
            type="reset" value="Reset Button">
        <button class="btn btn-success" type="button">
            Button</button>
        <a href="#" class="btn btn-success" role="button">
            Link Button</a>
    </div>
</body>
</html>              

Producción:

Contornos de botones: Bootstrap proporciona una serie de clases que se pueden usar cuando necesitamos usar botones con estilo de contorno en nuestro proyecto, es decir, botones sin color de fondo. Las clases de botón de contorno eliminan cualquier color de fondo o estilo de imagen de fondo aplicado a los botones. Estas clases se enumeran a continuación:

  • .btn-esquema-primario
  • .btn-esquema-secundario
  • .btn-esquema-éxito
  • .btn-esquema-info
  • .btn-contorno-advertencia
  • .btn-contorno-peligro
  • .btn-contorno-oscuro
  • .btn-contorno-luz
  • .btn-esquema-enlace

   

Ejemplo:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Button Outline</h2>
        <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>
</body>
</html>            

Producción:

Tamaños de botones: Bootstrap proporciona diferentes clases que permiten cambiar el tamaño del botón. Las clases .btn-lg y .btn-sm se utilizan para botones grandes y pequeños.

Ejemplo:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Button Sizes</h2>
        <button type="button" 
            class="btn btn-success btn-sm">
            Small Button
        </button>
        <button type="button" 
            class="btn btn-success">
            Default Button
        </button>
        <button type="button" 
            class="btn btn-success btn-lg">
            Large Button
        </button>
    </div>
</body>
</html>                 

Producción:

Botones de estado activo: la clase .active se usa para hacer un botón y vincularlo al estado activo.

Ejemplo:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Button Active State</h2>
        <button type="button" 
            class="btn btn-success">
            Default Button
        </button>
        <button type="button" 
            class="btn btn-success active">
            Active Button
        </button>
    </div>
</body>
</html>                   

Producción:

Botones de estado deshabilitados: el atributo deshabilitado se usa con el elemento <button> para establecer el estado deshabilitado del botón.

Ejemplo:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Button Disabled State</h2>
        <button type="button" 
            class="btn btn-primary" disabled>
            Disabled Button
        </button>
        <button type="button" 
            class="btn btn-success" disabled>
            Disabled Button
        </button>
    </div>
</body>
</html>                  

Producción:

Botones de nivel de bloque: la clase .btn-block se usa para crear un botón de nivel de bloque que ocupa todo el ancho del elemento principal.

Ejemplo:

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Block Level Buttons</h2>
        <button type="button" 
            class="btn btn-block btn-primary">
            Block Level Button
        </button>
        <button type="button" 
            class="btn btn-block btn-success">
            Block Level Button
        </button>
    </div>
</body>
</html>                   

Producción:

Botones giratorios: las clases spinner-* se utilizan para agregar un botón giratorio.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Buttons</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.3.1/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
</head>
<body style="text-align:center;">
    <div class="container mt-3">
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h2>Spinner Buttons</h2>
        <button type="button" class="btn btn-primary">
            <span class="spinner-border spinner-border-sm"></span>
            Spinner Button
        </button>
        <button type="button" class="btn btn-success">
            <span class="spinner-grow spinner-grow-sm"></span>
            Spinner Button
        </button>
    </div>
</body>
</html>                   

Producción:

Navegador compatible:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *